如果内联元素超出最大宽度并分成两行，则CSS max-width会导致太多空白区域

Question

我正在尝试设置li元素的样式，以便在li's之间以相等的间距动态调整其文本内容，但似乎无法实现此目的。

目前的结果如下：

我希望li's之间的空格一致但整体li's为动态宽度但不超过一定宽度:(因为有两个不同的ul's它们是具有不同填充的样式，这就是为什么左侧菜单和右侧菜单之间的空间大小不同，但每个li在相应的ul's中始终保持不变

css是（任意）：

li{
   display: inline-block;
   max-width: 95px;
   padding: 5px 10px;
   etc....
}

我正在尝试使用css完成此操作，如果可能，请避免使用JavaScript或html标记。谢谢。

Answer 1

如果你想要元素之间的空白是相同的，即。较小的标题将有较小的菜单项，如你的图像，那么你运气不好。如果没有JavaScript，我认为你无法做到。

如果你要设置统一宽度的菜单项，那么这很容易实现，只需将<li>设置为100%/(number of menu items)并浮动它们。

li {
    float:left;
    width:14.2857% /* 100/17 */
}

Answer 2

这是针对Opera，Chrome和IE10进行了优化的。 Firefox和Safari遵循较旧的Flexbox规范，当列表具有平衡的项目数时，它们看起来最佳。对于非Flexbox浏览器，有一个不错的外观。您可能需要添加其他样式以掩盖不均匀的列表高度。

http://codepen.io/cimmanon/pen/HxLvf

nav {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

ul {
  display: table-cell; /* non-flexbox browsers */
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}

li {
  display: table-cell; /* non-flexbox browsers */
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1 1 10em;
  -ms-flex: 1 1 10em;
  flex: 1 1 10em;
  width: 10em; /* for old Firefox/Safari */
  /* for vertical/center alignment */
  -webkit-flex-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -webkit-flex-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  text-align: center;
}

/* pretty it up! */
nav {
  background: #99D;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  padding: .5em 1em;
  background: white;
  border: 1px solid;
}


<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Latest Projects</a></li>
        <li><a href="#">Products & Eco Funding</a></li>
        <li><a href="#">The Green Deal</a></li>
    </ul>

    <ul>
        <li><a href="#">Latest Projects</a></li>
        <li><a href="#">Job Vacancies</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>
</nav>

你有两个列表要平衡元素的宽度这一事实使得Flexbox成为必要。如果您只有一个列表，则可以将整个内容简化为只使用display: table上的ul和display: table-cell上的li。