如何*真正*证明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 {

    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>