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