浮动<li>包含图像的元素</li>下4px差距

时间:2013-04-15 09:13:15

标签: html css css-float

我有以下 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>元素,则不会出现问题。

所以,我的两个问题是:

  1. 为什么会这样?
  2. 我该怎么做才能解决它?

3 个答案:

答案 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;
}

http://jsfiddle.net/Kyle_Sevenoaks/DBcPw/2/

答案 2 :(得分:0)

li的高度应与img的高度匹配。

div.container > ul li {
    float: left;
    background-color: yellow;
    height: 30px;
}

工作示例 http://jsfiddle.net/DBcPw/6/