修复了导航栏列表项不起作用答案

【问题标题】：Fixed navbar list items not working修复了导航栏列表项不起作用
【发布时间】：2014-10-29 21:11:53
【问题描述】：

我有这个导航栏：Codepen。这是一个固定的导航栏，我希望超过 980px 有一个固定的宽度（以 px 为单位），但我不知道为什么最后一个列表项位于导航栏下方。

<header class="" role="banner">
 <nav role="navigation">
  <a href="index.html" class="nav-logo"></a>
  <ul class="nav-list">
    <li><a href="#" class="current">hi</a></li>
    <li><a href="#">there</a></li>
    <li><a href="#">I</a></li>
    <li><a href="#">have</a></li>
    <li><a href="#">a</a></li>
    <li><a href="#">problem</a></li>
  </ul>
  <span class="nav-toggle">&#x2261;</span>
</nav>

【问题讨论】：

没有足够的空间让您的浮动项目与其他项目在同一行。将您的 nav 项目增加到 885px 可以解决此问题.. 或者您可以减少您的宽度项目
最后一个列表项没有相同的填充和相同的大小...导航栏的最后一部分有一个空格，但我希望 ul 占用所有空间

标签： html responsive-design sass navbar fixed-width

【解决方案1】：

检查这对你有帮助：http://codepen.io/panchroma/pen/IoGvl

从你的css的第52行开始

@media screen and (min-width: 980px) {
  nav[role=navigation] {
    width: 882px;
    margin: 0 30px;
  }

但这不足以容纳您的菜单项。在我编辑的笔中，我将宽度更改为 970px

编辑

我希望每个列表项具有相同的大小，并且导航栏本身保持其 margin-right 和 margin-left 30px

现在检查我的笔：http://codepen.io/panchroma/pen/IoGvl 您问题的根源仍然是没有足够的空间来容纳所有东西。

你在nav元素本身，nav-logo，左右边距为30px，ul左右边距为2em，每个li左右边距，加上每个li的宽度 > a

如果我正确理解了您的描述，将导航宽度增加到 888 像素似乎会有所帮助。您是否已将列表项左侧边框的 1 x 6 像素宽度计入计算中？

希望这会有所帮助！

【讨论】：

@user3654340，请查看我上面的cmets
谢谢，我没有注意到 li 项目的 1 x 6px 宽度！有没有办法删除最后一个列表项的剩余空间（不破坏其位置）？ @DavidTaiaroa
我不确定您指的是哪个空间 @user3654340 。另一种选择是将 li > a 元素的宽度从 131 更改为 130px 。见codepen.io/panchroma/pen/DneJv

【解决方案2】：

感谢您的帮助！解决了这个问题：Codepen。我所做的只是将导航包装在一个元素中并给它填充：0 30px 以创建一个固定的导航（在某个断点上）。

<header>
  <nav>
    <ul>
      <li><a href="home.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="services.html">Services</a></li>
      <li><a href="products.html">Products</a></li>
      <li><a href="jobs.html">Jobs</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>
</header>

已添加 CSS：

@media only screen and(min-width: 980px) {
  header {
    padding: 0 30px;
  }
}

【讨论】：