Question

我有这个导航栏：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>

Answer 1

检查这有助于您：http://codepen.io/panchroma/pen/IoGvl

从您的css第52行开始

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

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

修改

我希望每个列表项具有相同的大小，以及导航栏本身保持其保证金权利和保证金保留30px

立即检查我的笔：http://codepen.io/panchroma/pen/IoGvl 你的问题的根源仍然是没有足够的空间来适应一切。

你在导航元素本身上有左右边距30px，导航标识，ul上的2em的左右边距，每个li上的左边框，加上每个li的宽度＆gt;

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

希望这有帮助！

Answer 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;
  }
}

固定导航栏列表项不起作用

2 个答案: