CSS对齐导航栏

示例

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

的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（但为负数）。

• 如果页面变得太窄而无法容纳所有项目，则这些项目将中断到新行（从右开始），并在此行上进行调整。菜单的总高度将根据需要增加。