修复了侧边栏重叠的页面内容?

2022-04-20 00:00:00 sidebar overlap html css center

我使用css和html制作了一个侧边栏。然而,无论我做什么,当我试图在我的HTML页面上放入一些内容时,它都会放在页面的左上角,在侧边栏下面。如何将固定内容放置在页面的右侧?

下面显示的是我的css代码,如果有什么东西阻止主要内容位于页面的右中心,请告诉我。

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">
.sidebar a {
  display: block;
  padding: 10px;
}

body {
  background-color: white;
}

.sidebar {
  margin: 14px;
  padding: 0;
  width: 175px;
  position: fixed;
  height: 100%;
  overflow: auto;
  text-align: left;
  margin-left: 30px;
}
<!DOCTYPE HTML>
<html lang="en" dir="ltr">

<head>
  <link href="myMenuStyle.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?    family=Bungee+Hairline&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
  <meta charset="utf-8">
  <link rel="import" href="TableOfContent.html">
  <title>about me</title>
  <link rel="icon" href="cool.ico">

</head>

<body>
  <!-- The sidebar -->
  <div class="sidebar">
    <a id='one' href="TableOfContent.html" style="font-weight: bold">Table of Content</a>
    <p><u>Visual Communication:</u></p>
    <bl>
      <a id='two' class='click' href="GraphicD.html">Graphic Design</a>
      <a id='three' class='click' href="Illustration.html">Illustration</a>
      <a id='four' class='click' href="Photography.html">Photography</a>
      <p><u>Multi Media/Digital Media:</u></p>
      <a id='five' class='click' href="Scripting.html">Scripting</a>
      <a id='six' class='click' href="Sound.html">Sound</a>
      <p><u>Programming:</u></p>
      <a id='seven' class='click' href="Coding.html">Coding</a>
      <a id='eight' class='click' href="Game.html">Interactive/Game Design</a>
      <a id='nine' class='click' href="Arduino.html">Hardware/Electrical Circuit</a>
      <p><br></p>
  </div>

  <!-- Page content -->
  <p>Testing</p>


</body>

</html>


解决方案

您需要首先定义FlexBox布局以从左到右组织内容,这与默认的从上到下的HTMLDOM行为形成对比。要做到这一点,首先将整个容器包装在div中,然后在其上应用display: flex。然后将flex-direction: row设置为从左到右进行排序。但是,当您将块定义为position: fixed时,它将从文档模型中取出,因此您的右侧内容将显示在左侧fixed位置块下。要解决这一问题,请在右侧内容上加上左边距(根据左侧容器的宽度,约为15%)。

我对HTML文件进行了几处更改以应用FlexBox:

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">
.sidebar a {
  display: block;
  padding: 10px;
}

body {
  background-color: white;
}

.sidebar {
  margin: 14px;
  padding: 0;
  width: 175px;
  position: fixed;
  height: 100%;
  text-align: left;
  margin-left: 30px;
}

.main {
  display: flex;
  flex-direction: row;
}

.content {
  margin-top: 20px;
  margin-left: 15%;
}
<!DOCTYPE HTML>
<html lang="en" dir="ltr">

<head>
  <link href="myMenuStyle.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?    family=Bungee+Hairline&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
  <meta charset="utf-8">
  <link rel="import" href="TableOfContent.html">
  <title>about me</title>
  <link rel="icon" href="cool.ico">

</head>

<body>
  <!-- The sidebar -->
  <div class="main">
    <div class="sidebar">
      <a id='one' href="TableOfContent.html" style="font-weight: bold">Table of 
    Content</a>
      <p><u>Visual Communication:</u></p>
      <bl>
        <a id='two' class='click' href="GraphicD.html">Graphic Design</a>
        <a id='three' class='click' href="Illustration.html">Illustration</a>
        <a id='four' class='click' href="Photography.html">Photography</a>
        <p><u>Multi Media/Digital Media:</u></p>
        <a id='five' class='click' href="Scripting.html">Scripting</a>
        <a id='six' class='click' href="Sound.html">Sound</a>
        <p><u>Programming:</u></p>
        <a id='seven' class='click' href="Coding.html">Coding</a>
        <a id='eight' class='click' href="Game.html">Interactive/Game Design</a>
        <a id='nine' class='click' href="Arduino.html">Hardware/Electrical Circuit</a>
        <p><br></p>
    </div>

    <!-- Page content -->
    <div class="content">
      <p>Testing</p>
    </div>

  </div>
</body>

</html>

有关Flexbox的详细信息-here

相关文章