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>元素代替(除非并且直到您将图像用作链接或用于某些点击目的)