文章/答案/技术大牛

发布

问次级肚脐不对齐
EN

Stack Overflow用户

提问于 2021-05-06 04:58:41

回答 1查看 78关注 0票数 1

我试图让第二个肚脐对齐在右边，我尝试添加float:right，并尝试在右边添加一个空白，但不起作用。尝试删除nav标记并用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>

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

希望将ul列表移到演示程序下面的另一边，并将其删除。

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-05-06 06:18:54

这里有一些问题，就HTML语义而言，将<section>用于nav菜单没有多大意义。

表示文档的一个通用独立部分，该部分没有更具体的语义元素来表示它。一个没有内容和只有导航菜单的页面没有多大意义。

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

与使用浮点数创建布局的方法不同，柔性盒允许您通过将项目对齐到单个轴来创建布局。轴可以是水平的，也可以是垂直的。它最好用于在同一轴上分配项目的空间。

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

若要将两个元素放置在一行的相对边，只需使用Flexbox布局在<body>中的两个导航菜单之间使用justify-content: space-between分配“空格”。我将嵌套的<div>添加到<body>中，它将充当包含两个<nav>菜单的flex容器。您还可以垂直对齐弯曲项目(例如，两个导航菜单)沿交叉轴与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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67412074

复制

相似问题

问次级肚脐不对齐
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问次级肚脐不对齐EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问次级肚脐不对齐
EN