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

搞定了

每个li标签之间有一个空格 - 我删除了它：

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

原始答案::

您还有5px的上边距，因此空间为13，您需要删除5px上边距。

ER。你确定这是确切的css - 正如你所写的那样，你的上边距为5px，左边距为8.我根本没有看到任何底部边距。

http://jsfiddle.net/j5yDd/

Answer 2

好吧，既然您将列表项设置为inline-block，则标记中这些项之间的空格（即缩进）就是导致此处出现问题的原因。因此，两个列表项由空格和每个列表项左侧的边距分隔。

解决方案：尝试浮动列表项或删除列表标记之间的空格。

祝你好运。

XHTML Linebreak空间问题

2 个答案: