画像が間違った場所に表示される

Question

各行の前に小さな画像を入れたいリストがあります。

CSS：

.left div.arrow{background-image: url(../images/design/box.png); float:left; height:15px; width:15px; margin-right:2px;}

.left a.list:link, a:visited, a:active {color:black; font-size:0.8em; text-decoration:none; display:block; float:left;} 

HTML：

<div class="panel">My quick links</div> 
<div class="arrow"></div> 
<a href="/messages.php?p=new" class="list">Send a new message</a> 
<br /> 
<div class="arrow"></div> 
<a href="/settings.php#password" class="list">Change my password</a> 
<br /> 
<div class="arrow"></div> 
<a href="/settings.php#picture" class="list">Upload a new site image</a> 
<br /> 

あなたが見ることができるように、各画像には、書き込みの前に行く必要があります。最初の行には、「新しいメッセージを送信する」というテキストが前のイメージを持っています。しかし、その後の各行には最後にイメージがあります。 "新しいメッセージを送る"には、開始時と終了時にイメージがあります。

画像が前の行の最後にあるようです。 アイデアあなたはあまり仕事をして、リンク自体にある矢印を統合することができ

Answer 1

それだけ進歩があなたのCSSに記載されているピクセルの特定の数をダウンロードフロートクリアされませんあなたの< BR/> - 私は8つのピクセル下推測すると、それが分裂上に15ピクセルのフローティング背景画像を消去していませんが左。

あなたは<ブロードのスタイルのようなものが必要=「クリア：左」/ >または< BRスタイル=「クリア：両方」/ >スタイル=「クリア：左」最後の浮動要素の下に進めていきます。

セマンティクスでは、LIをブロックとしてスタイルを設定し、背景イメージを持つことができます。 ../images/design/box.pngが15ピクセルより大きい場合は、オーバーフロースタイルを使用してください。

更新

.left div.arrow{clear:left; background-image: url(../images/design/box.png); float:left; height:15px; width:15px; margin-right:2px;} 

はなしセマンティクスソリューション

だろう

Answer 2

：あなたは見栄えの良いリンクやメニューのスクープをしたい場合は

a.arrow { 
    background-image: url(../images/design/box.png); 
    float:left; 
    min-height:15px; 
    margin-right:2px; 
    display:block; 
    background-repeat:no-repeat; 
    background-position:0px 0px; 
    padding-right:20px 
    } 

は、以下を参照してください。I love lists。