È possibile utilizzare immagini di icone diverse per ciascun elemento dell'elenco all'interno di un elenco non ordinato?

Question

Non sono un utente avanzato di CSS, ma ho una conoscenza di lavoro decente, suppongo. Sto provando a creare un elenco non ordinato che utilizza icone diverse per ciascun elemento dell'elenco. Mi piacerebbe anche che il colore di sfondo dell'elemento della lista cambi al passaggio del mouse.

C'è un modo per farlo attraverso i CSS o vuoi semplicemente includere l'immagine dell'icona all'interno dell'elemento dell'elenco (come sotto)?

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

Utilizzando l'list-style-image sul livello ul rende tutte le icone lo stesso, e non sono stato in grado di capire un altro modo. La maggior parte degli esempi che ho trovato ti insegnano come usare le immagini in una lista, ma solo se le immagini puntate sono le stesse. Sono decisamente aperto a suggerimenti e miglioramenti sul modo in cui sto cercando di farlo.

grazie

<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

È possibile aggiungere immagini di sfondo su ciascun elemento dell'elenco e utilizzare il riempimento per allontanare il testo da esso.

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

Basta assicurarsi che il padding-left è la stessa dimensione come l'immagine (o un po 'più grande, se si desidera la spaziatura)

Answer 2

Vorrei suggerire di utilizzare le icone come sfondo-immagini per ogni elemento della lista. Con questo approccio è possibile posizionare facilmente anche i "punti elenco" (in particolare il posizionamento orizzontale).

Answer 3

Se si desidera utilizzare icone diverse per ciascuna lista, assegnare a ciascuna lista un nome univoco e utilizzare l'immagine di sfondo e posizionarla in modo appropriato in CSS.

Answer 4

Si tenta di impostare la proprietà list-style-image su un elemento a. Prova invece a impostarlo sull'elemento li.

Answer 5

Utilizzando il selettore di CSS3 :nth-child(), non richiede markup aggiuntivo su ogni elemento <li>:

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

Supporto Browser: IE9 +, FF3.5 +, SA3.1 +, OP9.5 +, CH2 +