html - 如何在带有 css ala apple 的容器中均匀地自动分配水平列表的元素

Question

我想创建一个类似于 apple.com 的大型导航栏。

我试图从苹果的导航栏中重现的是:

• 导航栏中的 li 居中；
• 浏览器自动平均分配ul容器中每个li之间的空间(与此处解释的 flex-grow 不同: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ );
• 调整大小时只调整 li 元素之间的空间浏览器窗口。

html:

<nav id="gn">
  <div id="gn-content">
    <ul class="gn-menu">
      <li class="gn-item gn-menu-brand"><a class="gn-link gn-link-brand" href="#"><span class="gn-link-span">Brand</span></a></li>
      <li class="gn-item gn-menu-products"><a class="gn-link gn-link-products" href="#"><span class="gn-link-span">Products</span></a></li>
      <li class="gn-item gn-menu-services"><a class="gn-link gn-link-services" href="#"><span class="gn-link-span">Services</span></a></li>
      <li class="gn-item gn-menu-about"><a class="gn-link gn-link-about" href="#"><span class="gn-link-span">About</span></a></li>
      <li class="gn-item gn-menu-contact"><a class="gn-link gn-link-contact" href="www.soundbody.io/contact"><span class="gn-link-span">Contact</span></a></li>
      <li class="gn-item gn-menu-signin"><a class="gn-link gn-link-signin" href="#"><span class="gn-link-span">Sign In</span></a></li>
    </ul>
  </div>
</nav>

CSS:

#gn {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 44px;
  background-color: #212121;
  z-index: 1;
}

#gn #gn-content {
  display: block;
  position: relative;
  max-width: 980px;
  height: 44px;
  margin: 0 auto;
  padding: 0 22px;
  opacity: 0.65;
  z-index: 2;
}

#gn .gn-menu {
  display: block;
  position: relative;
  width: auto;
  height: 44px;
  margin: 0 -10px;
  padding: 0;
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
  z-index: 3;
}

#gn .gn-item {
  display: inline-block;
  position: relative;
  width: auto;
  height: 44px;
  margin: 0 50px;
  padding: 0 0px;
  vertical-align: top;
  opacity: 1;
  z-index: 4;
}

#gn .gn-link {
  display: inline-block;
  position: relative;
  width: auto;
  height: 44px;
  margin: 0 0;
  padding: 0 10px;
  color: white;
  white-space: nowrap;
  background-repeat: no-repeat;
  background-position: center center;
  background-origin: content-box;
  z-index: 5;
}

#gn .gn-link-span {
  display: block;
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  top: 50%;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
}

.gn-link-brand {
  background-image: url("/img/brand.svg");
  background-size: cover;
}

我在网上找不到技巧。非常感谢您的帮助!

干杯!

Answer 1

这里我使用了flexbox。

您还设置了一些不需要的属性，我已将其清除。

#gn {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  background-color: #212121;
  z-index: 1;
}

#gn #gn-content {
  max-width: 980px;
  height: 44px;
  margin: 0 auto;
  padding: 0 22px;
  opacity: 0.65;
}

#gn .gn-menu {
  display: flex;                   /*  added property  */

  height: 44px;
  margin: 0 -10px;
  padding: 0;
  list-style: none;
}

#gn .gn-item {
  flex: 1;                         /*  added property  */
}

#gn .gn-link {
  display: flex;                   /*  added property  */
  justify-content: center;         /*  added property  */
  align-items: center;             /*  added property  */

  height: 44px;
  color: white;
  background-repeat: no-repeat;
  background-position: center center;
  background-origin: content-box;
}

#gn .gn-link-span {
  display: block;
  overflow: hidden;
}

.gn-link-brand {
  background-image: url("/img/brand.svg");
  background-size: cover;
}

<nav id="gn">
  <div id="gn-content">
    <ul class="gn-menu">
      <li class="gn-item gn-menu-brand"><a class="gn-link gn-link-brand" href="#"><span class="gn-link-span">Brand</span></a></li>
      <li class="gn-item gn-menu-products"><a class="gn-link gn-link-products" href="#"><span class="gn-link-span">Products</span></a></li>
      <li class="gn-item gn-menu-services"><a class="gn-link gn-link-services" href="#"><span class="gn-link-span">Services</span></a></li>
      <li class="gn-item gn-menu-about"><a class="gn-link gn-link-about" href="#"><span class="gn-link-span">About</span></a></li>
      <li class="gn-item gn-menu-contact"><a class="gn-link gn-link-contact" href="www.soundbody.io/contact"><span class="gn-link-span">Contact</span></a></li>
      <li class="gn-item gn-menu-signin"><a class="gn-link gn-link-signin" href="#"><span class="gn-link-span">Sign In</span></a></li>
    </ul>
  </div>
</nav>

---

根据评论更新，对元素使用 justify-content: space-around; 而不是 flex: 1

#gn {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  background-color: #212121;
  z-index: 1;
}

#gn #gn-content {
  max-width: 980px;
  height: 44px;
  margin: 0 auto;
  padding: 0 22px;
  opacity: 0.65;
}

#gn .gn-menu {
  display: flex;                   /*  added property  */
  justify-content: space-around;   /*  added property  */
  height: 44px;
  margin: 0 -10px;
  padding: 0;
  list-style: none;
}

#gn .gn-link {
  display: flex;                   /*  added property  */
  justify-content: center;         /*  added property  */
  align-items: center;             /*  added property  */

  height: 44px;
  color: white;
  background-repeat: no-repeat;
  background-position: center center;
  background-origin: content-box;
}

#gn .gn-link-span {
  display: block;
  overflow: hidden;
}

.gn-link-brand {
  background-image: url("/img/brand.svg");
  background-size: cover;
}

<nav id="gn">
  <div id="gn-content">
    <ul class="gn-menu">
      <li class="gn-item gn-menu-brand"><a class="gn-link gn-link-brand" href="#"><span class="gn-link-span">Brand</span></a></li>
      <li class="gn-item gn-menu-products"><a class="gn-link gn-link-products" href="#"><span class="gn-link-span">Products</span></a></li>
      <li class="gn-item gn-menu-services"><a class="gn-link gn-link-services" href="#"><span class="gn-link-span">Services</span></a></li>
      <li class="gn-item gn-menu-about"><a class="gn-link gn-link-about" href="#"><span class="gn-link-span">About</span></a></li>
      <li class="gn-item gn-menu-contact"><a class="gn-link gn-link-contact" href="www.soundbody.io/contact"><span class="gn-link-span">Contact</span></a></li>
      <li class="gn-item gn-menu-signin"><a class="gn-link gn-link-signin" href="#"><span class="gn-link-span">Sign In</span></a></li>
    </ul>
  </div>
</nav>