html - 全宽导航，每个项目的动态宽度等于 100%

Question

我想要一个带有 6 个菜单项的全宽导航，但每个项目都有不同的单词长度，这 6 个项目必须具有基于单词长度的动态百分比宽度，它们等于 100%。

希望下图能让大家更容易理解：

只有css可以吗？我已经尝试了几天，但没有找到任何解决方案。请帮忙。

标签： htmlcssnavigationbar

Answer 1

我会亲自用 flex 做这个

.flex{
 display:flex;
 flex-wrap:wrap
}

.logo{
  width:15%;
  text-align:center;
  color:#fff;
  background:red;
}

.nav{
  padding:0;
  margin:0 0 0 5%;
  width:80%;
}

.nav li{
  list-style-type:none;
  margin-left:auto;
}

.nav li:first-child{
  margin-left:0;
}

<div class="flex menu-container">
  <div class="logo">
    Logo
  </div>
  <ul class="nav flex">
    <li>About</li>
    <li>Custom-made product &amp; private label</li>
    <li>Packaging</li>
    <li>Facility</li>
    <li>Contact</li>
    <li>Social</li>
  </ul>
</div>