css - 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;
}

现在好了，每个列表之间的间距应该正好是 8px，但是当我在浏览器中查看它时...它的 mroe 然后是 8px。这是因为换行符。

如果我将所有 li 标签放在一行中，那会很好，但我真的不想那样做。 有没有一种方法可以让我的 html 保持原样，只编辑 css，这样这个空间就不再存在了？

Answer 1

好吧，由于您将列表项设置为 inline-block，标记中这些元素之间的空白(即缩进)就是这里造成问题的原因。因此，两个列表项由空格和每个列表项左侧的边距分隔。

解决方案:尝试 float 列表项或去掉列表标签之间的空白。

祝你好运。