Html 菜单填充变化

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

导航ul{
保证金：0；
填充：0；
背景：rgba（0,0,0,2）；
}
李国荣{
显示：内联块；
右边框：1px实心rgba（255255255.2）；
右边距：-3px；
}
李海军：最后一个孩子{
边界权：无；
}
海军ulli a{
显示：内联块；
填充：14px21.3px；
文本对齐：居中；
文字装饰：无；
文本转换：大写；
字号：0.938em；
大纲：0；
颜色：#fff；
}
@媒体屏幕和（-webkit最小设备像素比：0）{
海军ulli a{
填充：14px20.7px；
}
}
@仅媒体屏幕和（最小设备宽度：768px）和（最大设备宽度：1024px）{
海军ulli a{
填充：14px21.3px；
}
}
@-moz文档url-前缀（）{
海军ulli a{
填充：14px20.7px；
}
}
导航李a：悬停，导航李。主动a{
颜色：#fff；
背景：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的答案，非常接近您的方法@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;
}

---

我建议在“nav ul li a”中添加“white space:nowrap；”，以防止文本换行。另外，请注意，如果屏幕宽度太小，此菜单方法不会转到多行；但是，我不认为这是一项要求。在未来，Flexbox（）将使类似这样的任务变得更加容易和灵活。感谢Jayx，不幸的是，您的方法不允许在单元格内均匀分布，每个菜单项的第一个和最后一个字母及其各自边框之间的空间不一致，我准备了一个屏幕截图来更好地说明这一点@Jason，也谢谢你，我在这里发布之前查看了CSS技巧页面，但无法使其运行。