2

基本上我有一个 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，这样这个空间就不再存在了吗？

4

2 回答 2

1

知道了

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

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

原答案::

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

呃。你确定这是确切的 css - 正如所写的那样，你的上边距为 5px，左边距为 8。我根本看不到任何下边距。

http://jsfiddle.net/j5yDd/

于 2010-11-18T20:31:13.517 回答
1

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

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

祝你好运。

于 2010-11-18T20:44:17.367 回答