XHTML断行空间的问题

基本上我有一个UL列表XHTML断行空间的问题

<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然后8px。它因为换行符。

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

来源

2010-11-18 Ozzy

嗨奥兹，我真的不明白这个问题。实际上每个李之间都有8px。 – 2010-11-18 20:37:38

它的一个浏览器怪癖，基本上把这个lis之间的换行符当作li之间的空格。所以其实际上8px +考虑到字体和字体大小的空间的宽度。但设置字体大小为0不会工作，因为一些浏览器将其保留为1px而不是0 – Ozzy 2010-11-18 20:52:53

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

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

祝你好运。

来源

2010-11-18 20:44:17 aefxx

我加了float：留给LI风格......像魅力一样工作。谢谢:) – Ozzy 2010-11-18 20:47:21

尽管如此，请注意IE6的double float margin bug。看到这里：http://www.positioniseverything.net/explorer/doubled-margin.html。简短的回答：在相同方向间隔时使用填充而不是边距。 – aefxx 2010-11-18 20:51:15

是的老双重边缘错误¬_¬显示：内联到救援：D – Ozzy 2010-11-18 20:56:39

得到它

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

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

原来的答案::

你也有5像素的顶边，因此空间将是13，你需要删除5px的上边距。

呃。你确定这是确切的CSS - 正如书面你有一个5px的顶部边距和8左边距。我没有看到任何底部边缘。

http://jsfiddle.net/j5yDd/

来源

2010-11-18 20:31:13

我担心的唯一余量是左边距lol：P，因为li是内联块，因此它全部在一行上。只是li之间的空间大于8px – Ozzy 2010-11-18 20:36:08

是的，我现在看到 - 我在小提琴中检查过它，那里有一个非常奇怪的随机空间。 – 2010-11-18 20:37:52

@Ozzy看到我的编辑 – 2010-11-18 20:47:19

XHTML断行空间的问题

回答

相关问题