XHTML断行空间的问题

Question

基本上我有一个UL列表

<ul>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
</ul>

现在对列表中的样式是：

li {
    display:inline-block;
    margin:5px 0 0 8px;
    width:73px;
    overflow:hidden;
}


li a {
    display:block;
    background:url(../images/gtborder.png);
    width:73px;
    height:55px;
}
li:hover {
    background-position:0px -55px;
}

确定现在，每个列表之间的间隙应该是完全8像素，但是当我在浏览器中查看它...其MROE然后8像素。其因为换行的。

如果我对一个线上的所有立标记，这将是罚款，但我真的不希望这样做。 有没有一种方法我可以保持我的HTML，因为它是和刚才编辑的CSS所以这个空间的心不是那里了？

Answer 1

好吧，既然你设置列表项是inline-block在您的标记这些项目之间的空白（即压痕）就是在这里制造麻烦。因此两个列表项是由空格和左侧每个列表项的边缘分隔。

解决方案：尝试浮动列表项或列表中的标签之间摆脱空白

好运。

Answer 2

得到了它

有是每个L1标签之间的空间 - 我删除它：

http://jsfiddle.net/j5yDd/1/

原来的答案::

您也有5px的上边距所以空间将是13，你需要删除5px的上边距。

ER。你确定这是确切的CSS - 书面你有5px的上边距和8左边距我没有看到任何底部边缘都

http://jsfiddle.net/j5yDd/