XHTML换行空格问题
基本上我有一个 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，这样这个空间就不再存在了？
basically i have a ul list
<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>
now the styles for the list is:
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;
}
Ok now, the gap between each list should be exactly 8px but when i view it in a browser... its mroe then 8px. Its because of the newline.
If i had all the li tags on one line, it would be fine but i dont really want to do that.
Is there a way i can keep my html as it is and just edit the css so this space isnt there anymore?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
好吧，由于您将列表项设置为
inline-block，因此标记中这些项之间的空格（即缩进）就是造成问题的原因。因此，两个列表项由空格和每个列表项左侧的边距分隔。解决方案：尝试浮动列表项或删除列表标记之间的空格。
祝你好运。
Well, since you set the list items to be
inline-blockthe whitespace between these items in your markup (i.e. the indentation) is what is causing trouble here. Two list items are therefore seperated by a whitespace and the margin on the left of each list item.Solution: Try to float the list items or get rid of the whitespace in between the list tags.
Good luck.
明白了
每个 li 标签之间有一个空格 - 我删除了它：
http://jsfiddle.net/j5yDd/1 /
原答案::
你还有一个 5px 的上边距，所以空间将为 13，你需要删除 5px 的上边距。
呃。你确定这是准确的 css - 正如所写的，你的上边距为 5px，左边距为 8。我根本没有看到任何下边距。
http://jsfiddle.net/j5yDd/
Got it
There is a space between each li tag - I removed it:
http://jsfiddle.net/j5yDd/1/
original answer::
You also have a top margin of 5px so the space will be 13, you need to remove the 5px top margin.
er. are you sure this is the exact css - as written you have a top margin of 5px and a left margin of 8. I don't see any bottom margin at all.
http://jsfiddle.net/j5yDd/