web-dev-qa-db-ja.com

順序付けされていないリスト内のリスト要素ごとに異なるアイコン画像を使用できますか？

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

CSSを介してこれを行う方法はありますか、それともリスト要素内にアイコン画像を含めるだけですか（以下のように）？

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

lレベルでlist-style-imageを使用すると、すべてのアイコンが同じになり、別の方法を理解できませんでした。私が見つけたほとんどの例は、リスト内の画像の使用方法を教えていますが、箇条書きの画像が同じである場合に限ります。私はこれをやろうとしている方法についての提案や改善を絶対に受け入れています。

ありがとう

<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;
}
htmlcsshtml-lists
12
Patrick

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

<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;
}

パディング左が画像と同じサイズ（または間隔が必要な場合は少し大きい）であることを確認してください

14
fin1te

CSS3の:nth-child()セレクターを使用すると、各<li>要素に追加のマークアップは必要ありません。

ライブデモ

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 +

12
drudge

各リスト要素の背景画像としてアイコンを使用することをお勧めします。このアプローチを使用すると、「箇条書き」も簡単に配置できます（特に水平配置）。

1
Sutuma

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

1
Sjoerd

疑似要素::beforeのcontentプロパティの画像を使用するだけです。

li.item1::before {
    content: url(/Images/icon/item1-icon.svg);
    display: inline-block;
    width: 1em;
    margin-right: 6px;
    margin-left: -1em;
}

明らかに、異なるイメージを持つliごとにクラスが必要です。

0
nickornotto

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

0
Jaspero