html - 如何创建像 Apple 一样的导航栏？

Question

如何创建像 Apple 那样的导航栏？我试过了，这是我目前所拥有的:

如您所见，按钮的间距有点偏离。我使用 justify-content: space-around 来实现这一点。我试图使间距与 Apple 网站相同，但没有成功，想知道是否有人可以帮助我。仅供引用，这里是 Apple 网站的导航栏。

这是我尝试过的:

.wrapper {
  height: 100vh;
}

nav {
  height: 44px;
  overflow: scroll;
  background: #323232;
}

nav ul {
  display: flex;
  height: 44px;
  justify-content: space-around;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style-type: none;
}

nav li {}

nav a {
  display: block;
  color: white;
  font-size: 15px;
  font-weight: lighter;
  text-decoration: none;
  transition: 0.3s;
}

nav a:hover {
  color: #B8B8B8;
}

<div class="wrapper">
  <nav>
    <ul>
      <li><a href="#"><i class="fab fa-houzz"></i></a></li>
      <li><a href="#">Ban</a></li>
      <li><a href="#">Warn</a></li>
      <li><a href="#">Gift</a></li>
      <li><a href="#">User</a></li>
    </ul>
  </nav>
</div>

Answer 1

一些事情:

1. Apple 在导航中应用了一个具有“最大宽度”的“容器”。已在下方添加。
2. 我调整了一些样式以改善外观/感觉。下面的 CSS 中的注释。
3. 如果仔细观察，apple 在链接之间有“死 Angular ”。这也存在于此标记/布局中。

如果这不能解决您的问题，那么请告知您所说的“间距关闭”是什么意思 - 具体并清楚，否则无法提供帮助。 ...:)

body {
margin: 0;
}

.wrapper {
  height: 100vh;
}

nav {
  height: 44px;
  background: #323232;
  text-align: center; /* to center the UL in the nav */
}

nav ul {
  display: flex;
  max-width: 1200px; /* change to desired width */
  /* removed height from here, apply to a elements */
  justify-content: space-around;
  align-items: center;
  padding: 0;
  margin: 0 auto; /* 0 auto allows it to self-center in the nav */
  list-style-type: none;
}

nav li {}

nav a {
  display: inline-block;
  height: 44px; /* apply the height here, pushes the li / ul to be the correct height */
  line-height: 44px; /* to get vertical centering */
  color: white;
  font-size: 15px;
  font-weight: 100;
  text-decoration: none;
  transition: 0.3s;
}

nav a:hover {
  color: #B8B8B8;
}

<div class="wrapper">
  <nav>
    <ul>
      <li><a href="#"><i class="fab fa-houzz"></i></a></li>
      <li><a href="#">Ban</a></li>
      <li><a href="#">Warn</a></li>
      <li><a href="#">Gift</a></li>
      <li><a href="#">User</a></li>
    </ul>
  </nav>
</div>