您可以在HTML的菜单栏上找到大量教程，但是对于这个特定的(虽然我是通用的)情况，我还没有找到任何像样的解决方案:
# THE MENU ITEMS SHOULD BE JUSTIFIED JUST AS PLAIN TEXT WOULD BE #
# ^ ^ #
请注意，桌子在这里也不起作用:
使用HTML和CSS没有明显的方式以干净的方式实现这一点，这不是很奇怪吗？
现在CSS3 flexboxes个人有better browser support个，我们中的一些人终于可以开始使用它们了.只需添加more browser coverage的其他供应商前缀即可.
在本例中，您只需将父元素的display设置为flex，然后将justify-content property更改为space-between或space-around，以便在子flexbox项之间或周围添加空间.
Using 101-(example here):
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>Using 101-(example here):
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>