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に高さを含める必要があります

li{height: 30px;}