我有一个8个项目的菜单,让它均匀间隔在IE, Chrome Firefox,当使用ipad查看时,我不得不使用多余的填充在样式表中工作,但是如此混乱。更糟糕的是,每个菜单项的宽度不同。
花了几个小时在谷歌上,我什么也没得到。如果可能的话,寻找一个更干净的解决方案,HTML和CSS<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Shop</a></li>
<li><a href="">Convertible Roofs</a></li>
<li><a href="">Contact Us</a></li>
<li><a href="">Gallery</a></li>
<li><a href="">Customer Comments</a></li>
<li class="active"><a href="">Buyers Guide</a></li>
<li><a href="">Leather Care</a></li>
</ul>
</nav>
nav ul {
margin:0;
padding:0;
background:rgba(0,0,0,.2);
}
nav ul li {
display:inline-block;
border-right:1px solid rgba(255,255,255,.2);
margin-right:-3px;
}
nav ul li:last-child {
border-right:none;
}
nav ul li a {
display:inline-block;
padding:14px 21.3px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
font-size:0.938em;
outline:0;
color:#fff;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
nav ul li a {
padding:14px 20.7px;
}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
nav ul li a {
padding:14px 21.3px;
}
}
@-moz-document url-prefix() {
nav ul li a {
padding:14px 20.7px;
}
}
nav ul li a:hover,nav li.active a {
color:#fff;
background:rgba(0,0,0,.4);
}
看看你是否可以这样做;如果不行,我就给你点颜色瞧瞧……
基本的前提是使元素的行为像表格单元格,所以你不需要填充。我在Firebug中做了一个快速编辑-看看它是否适合你:
nav {
display: table;
height: 50px;
width: 100%;
}
nav ul {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.2);
display: table-row;
margin: 0;
padding: 0;
width: 100%;
}
nav ul li {
border-right: 1px solid rgba(255, 255, 255, 0.2);
display: table-cell;
line-height: 50px;
}
nav ul li a {
color: #fff;
display: block;
font-size: 0.938em;
outline: 0 none;
padding: 0;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
您可以删除添加填充的规则(第170行)。
免责声明:未在Firefox以外的任何浏览器上进行测试。
做了更多的挖掘,发现这个答案由@Rob Lowe在这个页面上如何使一个ul - li css菜单与项目之间的可变空间,非常接近你的方法@Jayx所以再次感谢。
nav {
width:960px;
display:table;
background:rgba(0,0,0,.2);
border-collapse:collapse;
margin:0;
padding:0;
}
nav ul {
display:table-row-group;
list-style:none;
margin:0;
padding:0;
}
nav li {
display:table-cell;
border-right:1px solid rgba(255,255,255,.2);
vertical-align:middle;
}
nav li a {
display:block;
padding:12px 15px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
font-size:0.938em;
outline:0;
color:#fff;
}