我想让一个CSS菜单全宽自动对齐。
HTML:
<nav class="menu">
<ul>
<li><a href="#">click</a></li>
<li><a href="#">click</a></li>
<li><a href="#">long clickclick</a></li>
<li><a href="#">click</a></li>
<li><a href="#">clickclickclick</a></li>
<li><a href="#">click click 666</a></li>
</ul>
</nav>CSS:
.menu {
text-align: justify;
font-size: 0;
font-size: 14px\9; /* IE6-9 hack */
line-height: 0;
}
.menu:after {
content: '';
display: inline-block;
width: 100%;
height: 0;
zoom: 1;
*display: inline;
}
.menu ul {
list-style: none;
padding: 0;
margin: 0;
display: inline;
}
.menu ul li {
display: inline-block;
font-size: 14px;
zoom: 1;
*display: inline;
}
.menu ul li a {
line-height: 54px;
}Demo
它在Chrome/Firefox上运行良好,但在IE 10-11上不起作用。有没有人能帮我修一下?

发布于 2014-08-05 17:51:05
我也遇到了同样的问题,添加text-justify: distribute到你的.menu,它会工作的很好。
发布于 2013-12-02 17:15:02
你的意思是你想让菜单分布在整个页面的宽度上?在这种情况下,将min-width:100%;添加到CSS文件中的.menu就可以做到这一点。
https://stackoverflow.com/questions/20324496
复制相似问题