html - 菜单填充变化

Question

我有一个包含 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);
}

Answer 1

看看你是否可以按原样进行；如果没有，我会帮你拉 fiddle ......

基本前提是使元素表现得像表格单元格，因此您不需要填充。我在 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 以外的任何软件中测试。