如何*真正*证明HTML + CSS中的水平菜单？

Question

您可以在HTML的菜单栏上找到很多教程，但是对于这种特定的（虽然是IMHO通用）案例，我没有找到任何合适的解决方案：

#  THE MENU ITEMS    SHOULD BE    JUSTIFIED     JUST AS    PLAIN TEXT     WOULD BE  #

#  ^                                                                             ^  #

纯文本菜单项数量不一，页面布局也很流畅。

第一个菜单项应左对齐，最后一个菜单项应右对齐。

其余项目应在菜单栏上进行最佳分配。

这个数字是变化的，因此没有机会预先计算出最佳宽度。

请注意，TABLE在这里也无法正常工作：

如果将所有TD居中，则第一个和最后一个项目对齐不正确。

如果左对齐，右对齐第一个。最后一项，间隔将不是最佳的。

没有明显的方法可以通过使用HTML和CSS干净地实现这一点，这很奇怪吗？

Answer 1

现代方法-Flexboxes！现在CSS3 flexbox具有更好的浏览器支持，我们当中的一些人终于可以开始使用它们了。只需添加其他供应商前缀即可获得更多浏览器覆盖。在这种情况下，您只需将父元素设置display为flex，然后将该justify-content属性更改为space-between或space-around，以便在子级flexbox项之间或周围添加空间。使用justify-content: space-between - （此处为示例）：ul {&nbsp; &nbsp; list-style: none;&nbsp; &nbsp; padding: 0;&nbsp; &nbsp; margin: 0;}.menu {&nbsp; &nbsp; display: flex;&nbsp; &nbsp; justify-content: space-between;}<ul class="menu">&nbsp; &nbsp; <li>Item One</li>&nbsp; &nbsp; <li>Item Two</li>&nbsp; &nbsp; <li>Item Three Longer</li>&nbsp; &nbsp; <li>Item Four</li></ul>使用justify-content: space-around - （此处为示例）：ul {&nbsp; &nbsp; list-style: none;&nbsp; &nbsp; padding: 0;&nbsp; &nbsp; margin: 0;}.menu {&nbsp; &nbsp; display: flex;&nbsp; &nbsp; justify-content: space-around;}<ul class="menu">&nbsp; &nbsp; <li>Item One</li>&nbsp; &nbsp; <li>Item Two</li>&nbsp; &nbsp; <li>Item Three Longer</li>&nbsp; &nbsp; <li>Item Four</li></ul>