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

Question

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

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

• 纯文本菜单项数量不一，页面布局也很流畅。
• 第一个菜单项应左对齐，最后一个菜单项应右对齐。
• 其余项目应在菜单栏上进行最佳分配。
• 数字是变化的，因此没有机会预先计算出最佳宽度。

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

• 如果将所有TD居中，则第一项和最后一项未正确对齐。
• 如果左对齐，右对齐第一个。最后一项，间隔将不是最佳的。

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

Answer 1

现代方法[-Flexbox](https://developer.mozilla.org/en-

US/docs/Web/Guide/CSS/Flexible_boxes)！

现在CSS3 flexbox具有更好的浏览器支持，我们中的一些人终于可以开始使用它们了。只需添加其他供应商前缀即可获得更多浏览器覆盖。

在这种情况下，您只需将父元素设置display为flex，然后将该justify- content属性更改为space-between或space- around，以便在子级flexbox项之间或周围添加空间。

使用justify-content: space-between - （
此处为示例）
：

ul {

    list-style: none;

    padding: 0;

    margin: 0;

}

.menu {

    display: flex;

    justify-content: space-between;

}


<ul class="menu">

    <li>Item One</li>

    <li>Item Two</li>

    <li>Item Three Longer</li>

    <li>Item Four</li>

</ul>

使用justify-content: space-around -
（此处为示例） ：

ul {

    list-style: none;

    padding: 0;

    margin: 0;

}

.menu {

    display: flex;

    justify-content: space-around;

}


<ul class="menu">

    <li>Item One</li>

    <li>Item Two</li>

    <li>Item Three Longer</li>

    <li>Item Four</li>

</ul>