html - 删除 HTML 列表项底部的多余空间

Question

有什么方法可以删除显示在 HTML 列表项标签底部的额外空间 ，而无需在列表项上设置固定高度？ 即我希望列表项换行到它的内容。

以下代码在水平列表中显示了 3 张图像，但每个 li 标签的高度比图像高 4px。我希望它环绕图像，即具有相同的宽度和高度。宽度目前相同，但我无法获得匹配的高度。

HTML:

<ul>
    <li><img alt="img1" src="img1.jpg" /></li>
    <li><img alt="img2" src="img2.jpg" /></li>
    <li><img alt="img3" src="img3.jpg" /></li>
</ul>

CSS:

li 
{ 
    display:block; 
    float:left; 
    margin:0;
    padding:0;
    background-color:Yellow;
}

Answer 1

这是您的代码:http://jsfiddle.net/23LcK/

差距与 li 无关。它是为 g 和 p 等字母的后代保留的空间(因为 img 是 inline 元素)。

您可以使用应用于 li img 的任何这些来删除它:

• 显示: block :http://jsfiddle.net/23LcK/1/
• vertical-align with top or bottom: http://jsfiddle.net/23LcK/2/