合理的导航栏

水平对齐导航（菜单）栏有一些应该合理的项目。第一个（左）项目在容器内没有左边距，最后一个（右）项目在容器内没有右边距。项目之间的距离相等，与单个项目宽度无关。

HTML

<nav>
    <ul>
        <li>abc</li>
        <li>abcdefghijkl</li>
        <li>abcdef</li>
    </ul>
</nav>

CSS

nav {
    width: 100%;
    line-height: 1.4em;
}
ul {
    list-style: none;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: justify;
    margin-bottom: -1.4em;
}
ul:after {
    content: "";
    display: inline-block;
    width: 100%;
}
li {
    display: inline-block;
}

笔记

• 选择 nav，ul 和 li 标签是因为它们的“导航列表（菜单）项目”的语义含义。当然也可以使用其他标签。
• :after 伪元素在 ul 中产生额外的线，因此该块的额外空高，推动其他内容。这是由负的 margin-bottom 解决的，它必须具有与 line-height 相同的幅度（但是为负）。
• 如果页面变得太窄而无法容纳所有项目，则项目将分解为新行（从右侧开始）并在此行上对齐。菜单的总高度将根据需要增长。