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 fiddle

http://jsfiddle.net/jMzub/

Answer 1

您需要清除 float

<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-image和background-position对于 <li>元素(除非并且直到您将使用图像作为链接或用于某些点击目的)