html - 如何缩小导航栏列表中对象之间的间隙？

Question

我正在尝试复制 apple.com 的 navbar .但是我遇到了一个问题，让列表比实际网站分布得更远。我想知道这是什么原因造成的？我试过 margin/padding对于列表，这是我能想到的最好的。
如果我在上面没有任何意义，总而言之，我只想将列表放在中间而不是分散得太多。

/* real active css */

body {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

.nav {
  height: 40px;
}

.nav .navbar {
  background: #1d1d1f;
  position: fixed;
  width: 100%;
  z-index: 1000;
  display: block;
}

.nav .navbar ul {
  background: #1d1d1f;
  width: 100%;
  height: 10px;
  display: flex;
  align-items: center;
  padding-left: 50px;
}

.nav .navbar ul li {
  list-style: none;
  margin: 0em 10em 0em 0em;
}

.nav .navbar ul li,
.navbar ul li a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
}

<nav class="nav">
  <div class="navbar">
    <ul>
      <li>
        <a href="https://www.apple.com"><img src="Images/apple.svg"></a>
      </li>
      <li><a href="https://www.apple.com/mac/" class="menu">Mac</a></li>
      <li><a href="https://www.apple.com/ipad/" class="menu">iPad</a></li>
      <li><a href="https://www.apple.com/iphone/" class="menu">iPhone</a></li>
      <li><a href="https://www.apple.com/watch/" class="menu">Watch</a></li>
      <li><a href="https://www.apple.com/tv/" class="menu">TV</a></li>
      <li><a href="https://www.apple.com/music/" class="menu">Music</a></li>
      <li><a href="https://support.apple.com/" class="menu">Support</a></li>
      <li>
        <a href="https://www.apple.com/mac/"><img src="Images/search.svg"></a>
      </li>
      <li>
        <a href="https://www.apple.com/mac/"><img src="Images/bag.svg"></a>
      </li>
    </ul>
  </div>
</nav>

Answer 1

您需要设置max-width在您的 .nav ul - 你也应该使用 justify-content: space-evenly将它们在列表中正确隔开，而不是使用 margins .
另外我们需要设置margin至 0 auto在 nav > ul以便它保持在中心并响应浏览器。我已经修复了你的 CSS并按预期工作。
工作演示: (运行下面的代码段并单击整页以查看结果)

/* real active css */

body {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

.nav {
  height: 40px;
}

.nav .navbar {
  background: #1d1d1f;
  position: fixed;
  width: 100%;
  z-index: 1000;
  display: block;
}

.nav .navbar ul {
  background: #1d1d1f;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.2em;
}

.nav .navbar ul li {
  list-style: none;
}

.nav .navbar ul li,
.navbar ul li a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
}

<nav class="nav">
  <div class="navbar">
    <ul>
      <li>
        <a href="https://www.apple.com"><img src="Images/apple.svg"></a>
      </li>
      <li><a href="https://www.apple.com/mac/" class="menu">Mac</a></li>
      <li><a href="https://www.apple.com/ipad/" class="menu">iPad</a></li>
      <li><a href="https://www.apple.com/iphone/" class="menu">iPhone</a></li>
      <li><a href="https://www.apple.com/watch/" class="menu">Watch</a></li>
      <li><a href="https://www.apple.com/tv/" class="menu">TV</a></li>
      <li><a href="https://www.apple.com/music/" class="menu">Music</a></li>
      <li><a href="https://support.apple.com/" class="menu">Support</a></li>
      <li>
        <a href="https://www.apple.com/mac/"><img src="Images/search.svg"></a>
      </li>
      <li>
        <a href="https://www.apple.com/mac/"><img src="Images/bag.svg"></a>
      </li>
    </ul>
  </div>
</nav>