辅助导航栏未对齐

时间：2021-05-06 04:58:41

标签： html css

我试图让第二个导航栏在右侧对齐，我尝试添加 float:right 并尝试在右侧添加边距以将单词隔开，但不起作用。尝试删除导航标记并将其替换为 section 但它不起作用。

/* NAV ON TOP*/
.pagetopTop{
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 500;
    transition: ease-in-out 0.3s;
    padding-bottom: 20px;
}

.topNav{
  display: flex;
    float: right;
}

.Topspan{
  margin: var(--size-10);
}

/*navbar*/


.navbar .container{
  top: 0;
  right: 0;
  left: 0;
  z-index: 500;
  transition: ease-in-out 0.3s;
   display:flex
}

.navbar-brand{
  height: var(--size-50);
  margin-top: var(--size-40);
  cursor: pointer;
}

.navbar-nav{
  display: flex;
  align-items: center;
}


.navbar-nav li{
  align-items: center;
  position: absolute;
}

body{
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--font-color-base);
  margin: 0;
  padding: 0;
}

*,
  ::after,
  ::before{
    box-sizing: border-box;
  }

  ul{
    margin: 0;
    padding: 0;
    list-style: none;
  }

  a{ text-decoration: none;}

  p{ margin-top: 0;}

  h2{
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 1.2;
  }
  img{
    max-width: 100%;
    vertical-align: middle;
    border-style: none;
  }

  .container{
    width: 100%;
    padding-left: 40px;
    padding-right: 40px;
    margin-left: auto;
    margin-right: auto;
  }
<body>
  <section id="pagetopTop" class="pagetopTop">
    <div class="container">
      <i class="fas fa-angle-left"></i>
      <span class="Topspan">Main Demos</span>

      <ul class="topNav">
        <li class="nav-link">
          <span class="Topspan">Demos</span>
          <i class="fas fa-angle-down"></i>
        </li>
        <li class="nav-link">
          <span class="Topspan">Docs</span>
          <i class="fas fa-angle-down"></i>
        </li>
      </ul>
    </div>
  </section>

  <nav id="Nav" class="navbar nav">
    <div class="container">
    <a href="" class="">
      <img src="Week5saasappassets-210323-142515 (1)/Week-5-saas-app-assets/project_logo/logo.svg" alt="Company logo" class="navbar-brand">
    </a>
      <ul class="navbar-nav">
        <li class="nav-link">
          <a href="#">Home</a>
        </li>
        <li class="nav-link">
          <a href="#">Features</a>
        </li>
        <li class="nav-link">
          <a href="#">Learn</a>
        </li>
        <li class="nav-link">
          <a href="#">Price</a>
        </li>
        <li class="nav-link">
          <a href="#">Hire us</a>
        </li>
      </ul>
    </div>
  </nav>

</body>

可能是因为边距或父元素相互重叠。

enter image description here

想要将 ul 列表移动到演示下方的另一侧并将其隔开

1 个答案:

答案 0 :(得分：1)

这里有几个问题，就 HTML 语义而言，使用 <section> 作为导航菜单没有多大意义。 <section> 表示文档的通用独立部分，没有更具体的语义元素来表示它。没有内容而只有导航菜单的页面没有多大意义。

使用更语义化的元素，如 <nav>，它代表页面的一部分，其目的是在当前文档或其他文档中提供导航链接。更糟糕的是，对于导航菜单而言，没有语义意义的分割元素 <div> 比 <section> 更有意义。此外，您在 display: flex 容器上有 float: right 和 .topNav。 Flexbox 是沿单个轴为项目分配空间的“较新”方式，因此请使用一个或另一个，而不是两者都使用。

<块引用>

不是使用浮动来通过向左或向右浮动元素来创建布局，flexbox 允许您通过将项目对齐到单个轴来创建布局。轴可以是水平的或垂直的。最好用于为同一轴上的物品分配空间

您使用了一堆 FontAwesome 图标，但没有在您的示例中包含 <script> 标记，因此它们都没有呈现。接下来，position: fixed 容器上的 <section> 与 <li> 元素的绝对定位配对，这会导致某些菜单项重叠，因为您将内容从“正常流程”中取出”。除非这是有意为之，否则我不确定确切的“预期输出”是什么，因为您没有包含图片。

要将两个元素放置在一行中的相对两侧，只需使用 Flexbox 布局在 <body> 中使用 justify-content: space-between 分配两个导航菜单之间的“空间”。我向 <div> 添加了一个嵌套的 <body>，它将充当包含两个 <nav> 菜单的弹性容器。您还可以使用 align-items: center 沿横轴垂直对齐弹性项目（例如两个导航菜单）。我会让你从这里开始，按照你想要的方式设置视口每一侧的导航菜单的样式。

/* NAV ON TOP*/

.flexbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagetopTop{
    /*position: fixed;
    top: 0;
    right: 0;
    left: 0;*/
    z-index: 500;
    transition: ease-in-out 0.3s;
    padding-bottom: 20px;
}

.topNav{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.Topspan{
  margin: var(--size-10);
}

/*navbar*/


.navbar .container{
  /*top: 0;
  right: 0;
  left: 0;*/
  z-index: 500;
  transition: ease-in-out 0.3s;
  display:flex;
  align-items: center;
  margin-top: 1rem;
}

.navbar-brand{
  height: var(--size-50);
  margin-top: var(--size-40);
  cursor: pointer;
}

.navbar-nav{
  display: flex;
  flex-direction: column;
  align-items: center;
}


.navbar-nav li{
  align-items: center;
  /*position: absolute;*/
}

body{
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--font-color-base);
  margin: 0;
  padding: 0;
}
*,
::after,
::before{
  box-sizing: border-box;
}


ul{
  margin: 0;
  padding: 0;
  list-style: none;
}

a{ text-decoration: none;}

p{ margin-top: 0;}

h2{
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.2;
}
img{
  max-width: 100%;
  vertical-align: middle;
  border-style: none;
}

.container{
  width: 100%;
  padding-left: 40px;
  padding-right: 40px;
  margin-left: auto;
  margin-right: auto;
}
<body>
  <div class="flexbox">
    <nav id="pagetopTop" class="pagetopTop">
      <div class="container">
        <i class="fas fa-angle-left"></i>
        <span class="Topspan">Main Demos</span>
        <ul class="topNav">
          <li class="nav-link">
            <span class="Topspan">Demos</span>
            <i class="fas fa-angle-down"></i>
          </li>
          <li class="nav-link">
            <span class="Topspan">Docs</span>
            <i class="fas fa-angle-down"></i>
          </li>
        </ul>
      </div>
    </nav>
    <nav id="Nav" class="navbar nav">
      <div class="container">
      <a href="" class="">
        <img src="https://dynamic.brandcrowd.com/asset/logo/8cb54db0-7219-4bf6-bba3-1c9e94078516/logo?v=4" width="60" height="60" alt="Company logo" class="navbar-brand">
      </a>
        <ul class="navbar-nav">
          <li class="nav-link">
            <a href="#">Home</a>
          </li>
          <li class="nav-link">
            <a href="#">Features</a>
          </li>
          <li class="nav-link">
            <a href="#">Learn</a>
          </li>
          <li class="nav-link">
            <a href="#">Price</a>
          </li>
          <li class="nav-link">
            <a href="#">Hire us</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>
    <!-- Font Awesome Script -->
  <script src="https://kit.fontawesome.com/e03d7ac5cf.js" crossorigin="anonymous"></script>
</body>

相关问题
最新问题