順序なしリスト内の各リスト要素に異なるアイコンイメージを使用できますか？

Question

私はCSSの上級ユーザーではありませんが、私はまあまあ良い知識を持っています。私はリスト要素ごとに異なるアイコンを使用する順序のないリストを作成しようとしています。私はまた、ホバー時に変更するリスト要素の背景色が好きです。

CSSでこれを行う方法はありますか、またはリスト要素内にアイコン画像を入れるだけですか（下のように）？

<li><img src="voters.jpg"><a href="voters.html">Voters</a></li> 

ULレベルにのlist-style-画像を使用すると、アイコンがすべて同じになり、そして、私は別の方法を把握することができていません。私が見つけたほとんどの例は、箇条書きの画像を使用する方法を教えていますが、箇条書きの画像が同じ場合にのみ表示されます。私はこれをやろうとしているところで、提案と改善に間違いがない。

おかげ

<div class="content-nav"> 
    <ul> 
    <li class="instructions"><a href="instructions.html">Instructions</a></li> 
    <li class="voters"><a href="voters.html">Voters</a></li> 
    </ul> 
</div> 

.content-nav { 
    font-size:12px; 
    width:160px; 
    z-index:0; 
} 

.content-nav ul { 
    padding:0 20px; 
    margin:30px 0; 
} 

.content-nav li { 
    padding:5px; 
    margin:5px 5px; 
} 

.content-nav li a { 
    color:#666; 
    text-decoration:none; 
} 

.content-nav li.voters a { 
    background:#FFF; 
    color:#666; 
    text-decoration:none; 
    list-style-image:url(images/voters.jpg); 
} 

.content-nav li.voters a:hover { 
    background:#0CF; 
    color:#000; 
} 

.content-nav li.instructions a { 
    background:#FFF; 
    color:#666; 
    text-decoration:none; 
    list-style-image:url(images/voters.jpg); 
} 

.content-nav li.instructions a:hover { 
    background:#0CF; 
    color:#000; 
} 

Answer 1

各リスト要素に背景画像を追加し、パディングを使用してその部分からテキストを押し出すことができます。

<ul> 
    <li class="li1">List 1</li> 
    <li class="li2">List 2</li> 
</ul> 

.li1 { 
    background:url('li1.gif') 50% 50% no-repeat no-repeat; 
    padding-left: 5px; 
} 
.li2 { 
    background:url('li2.gif') 50% 50% no-repeat no-repeat; 
    padding-left: 5px; 
} 

ジャストパディング左は、各<li>要素の追加のマークアップを必要としないCSS3の:nth-child()セレクタを使用した画像と同じサイズ（またはビットしたい場合は、より大きな間隔）

Answer 2

私は、各リスト要素の背景画像としてアイコンを使用することをお勧めします。この手法を使用すると、「箇条書き点」（特に水平位置）を簡単に配置することができます。

Answer 3

各リストに異なるアイコンを使用する場合は、各リストに一意の名前を付け、background-imageを使用してCSSで適切に配置するよりも、

Answer 4

a要素のlist-style-imageプロパティを設定しようとしました。代わりにli要素に設定してみてください。

Answer 5

であることを確認してください。

Live Demo

HTML：

<ul> 
    <li>One</li> 
    <li>Two</li> 
    <li>Three</li> 
</ul> 

CSS：

ul li:nth-child(1) { 
    list-style-image: url('http://google-maps-icons.googlecode.com/files/teal01.png'); 
} 
ul li:nth-child(2) { 
    list-style-image: url('http://google-maps-icons.googlecode.com/files/teal02.png'); 
} 
ul li:nth-child(3) { 
    list-style-image: url('http://google-maps-icons.googlecode.com/files/teal03.png'); 
} 

ブラウザのサポート：あなたは現在 `リストを適用している IE9 +、FF3.5 +、SA3.1の+、OP9.5の+、CH2 +