Html 如何平均分配&；在带有css的容器中自动显示水平列表中的项目

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

我试图从苹果的导航栏复制的是：

• 导航栏中的li居中
• 浏览器会自动平均分配ul容器中每个li之间的空间 （与flex grow不同，如下所述： );
• 调整li元素大小时，仅调整li元素之间的空间大小 浏览器的窗口

html:

我在网上找不到诀窍。谢谢你的帮助

---

干杯

这里我使用了

flexbox

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

#gn{
位置：绝对位置；
排名：0；
左：0；
右：0；
高度：44px；
背景色：#212121；
z指数：1；
}
#gn#gn内容{
最大宽度：980px；
高度：44px；
保证金：0自动；
填充：0 22px；
不透明度：0.65；
}
#gn.gn菜单{
显示：flex；/*已添加属性*/
高度：44px；
利润率：0-10px；
填充：0；
列表样式：无；
}
#gn.gn项目{
flex:1；/*添加了属性*/
}
#gn.gn链接{
显示：flex；/*已添加属性*/
对齐内容：中心；/*已添加属性*/
对齐项目：居中；/*添加属性*/
高度：44px；
颜色：白色；
背景重复：无重复；
背景位置：中心；
背景来源：内容框；
}
#gn.gn链路跨度{
显示：块；
溢出：隐藏；
}
.gn链接品牌{
背景图片：url（“/img/brand.svg”）；
背景尺寸：封面；
}

apple.com正在使用svg作为文本。。您可以采用相同的方法，非常简单，因为我们现在不向用户编写代码，所以，请发布一个有效的代码片段，我们将看看我们是否可以让它以您希望的方式工作感谢您的及时反馈。让我根据你的建议编辑我的帖子……“ElGringotte，我会的，谢谢，也谢谢你，并且考虑接受我的回答。嗨，LGSon，谢谢你的快速帮助！”这个解决方案的问题是链接之间没有间隙/不可点击的区域。苹果公司给人的好印象是链接之间有空白/不可点击的区域。我无法使用flex属性修复此问题…@elgringote将更新我的答案修复此问题，并在修复时通知您done@ElGringotte更新了我的答案，效果很好！！！我用flex属性。周末我会好起来的！祝你周末愉快！

<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>

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