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（但为负数）。
如果页面变得太窄而无法容纳所有项目，则这些项目将中断到新行（从右开始），并在此行上进行调整。菜单的总高度将根据需要增加。
热门推荐
10 感谢韩语老师祝福语简短
11 升职文案高级祝福语简短
12 花童结婚祝福语大全简短
13 向国庆送祝福语简短
14 什么寄语简短祝福语女生
15 客户回礼祝福语大全简短
16 女孩生日祝福语简短创意
17 家长回复节日祝福语简短
18 给外婆敬酒祝福语简短