Html CSS：导航精灵图像对齐问题

这是我的开发链接：

我在文本对齐和精灵对齐方面有问题。这是我工作的地方

我不明白的是为什么li的宽度不同，我在Chrome的inspector中查看了一下，目前第一个导航按钮的宽度是190，第二个是215

这似乎是基于李的书里面的文字。我如何正确地创建4个导航按钮，大小为196 x 60，第1和第2、第3和第4个之间有2个像素

欢迎任何提示

当前CSS：

.nav {
width: 790px;
height: 60px;
}

#nav { width: 790px; margin: 0 auto; padding: 0;}

#nav ul {
padding: 0;
margin: 0;
}

#nav li {
width: 196px;
display: inline;
list-style-type: none;
font-family: 'Droid Sans', sans-serif;
font-size: 24px;
color: white;
}

#nav li a {
background-image:url('../img/sprite_nav.png');
background-repeat:no-repeat;
color: white;
text-decoration: none;
text-align: center;
line-height: 30px;
height: 60px;
padding: 0px 2px 32px 100px;
}

#nav li a.item1 {background-position:0px 0px; }
#nav li a:hover.item1 {background-position:0px -60px; }
#nav li a:active.item1 {background-position:0px -120px; }

#nav li a.item2 {background-position:0px 0px; }
#nav li a:hover.item2 {background-position:0px -60px; }
#nav li a:active.item2 {background-position:0px -120px; }

#nav li a.item3 {background-position:0px 0px; }
#nav li a:hover.item3 {background-position:0px -60px; }
#nav li a:active.item3 {background-position:0px -120px; }

#nav li a.item4 {background-position:0px 0px; }
#nav li a:hover.item4 {background-position:0px -60px; }
#nav li a:active.item4 {background-position:0px -120px; }

---

在a的元素上有一个0px 2px 32px 100px的填充

<a class="item2" href="#" title="View Interactive">Interactive</a>

“4个导航按钮，尺寸为196 x 60，第1和第2、第3和第4个之间有2个像素”

为了让我们提供好的建议，请将您的代码放到jsfiddle.net上，并将链接发送给我们，以便我们帮助测试。但从我的头顶上我可以补充：

要水平显示列表项，并将尺寸设置为196 x 60，请将设置为显示：块，浮动：左。。。并设置高度和宽度。添加文本对齐：居中，使文本居中

要使文本也垂直居中，我认为需要将行高度设置为li元素的内部高度，然后添加垂直对齐：中间

---

如果您的代码可以在jsfiddle.net上查看和测试，我们将能够提供更好的帮助。首先，将所有标记放在

中，而不是

中。和

float:left

您的

s而不是

显示：inline

。另外，

应该是

显示：块

和

高度

和

行高度

必须与文本垂直居中相同。另外，

列表样式类型

在

中，而不是

中。我没有真正的方法来尝试这个，但它应该会起作用

#nav ul { list-display-type: none; }
#nav li { float: left; }
#nav a { 
    display: block;
    width: 196px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    /* The rest of styles */
}

---

谢谢我的填充物太离谱了没问题！我建议研究一下盒子模型是如何解释的，这样可以防止这种事情发生。。。从现在起肯定会使用它：）

#nav ul { list-display-type: none; }
#nav li { float: left; }
#nav a { 
    display: block;
    width: 196px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    /* The rest of styles */
}

#nav li a {
background-image:url('../img/sprite_nav.png');
background-repeat:no-repeat;
color: white;
text-decoration: none;
line-height: 30px;
text-align: center;
height: 45px;
width: 190px;
display: block;
float: left;
padding: 15px 0px 0px 0px;
margin-right: 2px;
}