我有以下 HTML :
<div class="container">
<ul>
<li><img src="30x30.gif" /></li>
<li><img src="30x30.gif" /></li>
<li><img src="30x30.gif" /></li>
</ul>
<div style="clear: both" />
</div>
我希望这些图像在水平方向上很好地串在一起,所以我应用以下 CSS :
div, p, ul, li {
margin: 0;
padding: 0;
list-style: none;
}
div.container > ul li {
float: left;
background-color: yellow;
}
这很有效。但是,由于某种原因,<li>
元素底部有4px的间隙。我知道这是因为我可以看到黄色背景的条子(只是在底部,而不是一直到处)。
您可以在此处查看此举例:http://jsfiddle.net/DBcPw/
注意:只有在<li>
元素包含图片时才会出现这种情况。如果我尝试使用<p>
元素,则不会出现问题。
所以,我的两个问题是:
答案 0 :(得分:5)
以下是对jsfiddle
的更新我补充说:
img{display:block; float:left;}
它删除了浏览器倾向于应用于图像的额外填充和边距,以便为它们提供一些您可能不需要的间距。如果您要删除间距,请将它们设为display :block
,如果您希望它们彼此相邻,请制作图像float:left
。
答案 1 :(得分:1)
<img>
标记与您当前使用的字体之间的间距(取决于空格),因此在font-size: 0;
上设置<li>
就可以了。
li {
margin: 0;
padding: 0;
list-style: none;
font-size: 0;
}
答案 2 :(得分:0)
li
的高度应与img
的高度匹配。
div.container > ul li {
float: left;
background-color: yellow;
height: 30px;
}