css - 在 HTML 列表中向右浮动图像会导致对齐问题

Question

为简单起见，我使用了内联样式，这样您就可以看到发生了什么。我为列表元素使用了红色边框，为图像使用了黑色边框？为什么图像没有正确对齐？这一直让我发疯。

看截图：

见代码：

<ul>
<li style="border: 1px solid red">Result <span style="display: block; float: right; border: 1px solid #000"><img src="../../resources/images/delete.png" /></span></li>
<li style="border: 1px solid red">Result <span style="display: block; float: right; border: 1px solid #000"><img src="../../resources/images/delete.png" /></span></li>
<li style="border: 1px solid red">Result <span style="display: block; float: right; border: 1px solid #000"><img src="../../resources/images/delete.png" /></span></li>
</ul>

JS小提琴

http://jsfiddle.net/jMzub/

Answer 1

你需要清除浮动

<ul>
<li style="border: 1px solid red">Result 
<span style="display: block; float: right; border: 1px solid #000">
   <img src="../../resources/images/delete.png" />
</span>
<div style="clear: both;"></div>
</li>
<!--Same for other li-->
</ul>

但这是一种肮脏的方式，我会使用background-imageand background-positionfor <li>element 代替（除非并且直到您将图像用作链接或用于某些点击目的）

Answer 2

您需要将高度包括在内

li{height: 30px;}