Come stile liste non ordinate in CSS come testo separato da virgola

Question

Sto cercando un modo per stilare una lista non ordinata in XHTML con CSS tale da renderla in linea e gli elementi della lista separati da virgole.

Ad esempio, il seguente elenco deve essere visualizzato come apple, orange, banana (notare la virgola mancante alla fine dell'elenco).

<ul id="taglist"> 
    <li>apple</li> 
    <li>orange</li> 
    <li>banana</li> 
</ul> 

Attualmente, sto usando il seguente CSS per lo styling questa lista, che quasi fa quello che voglio, ma rende l'elenco come apple, orange, banana, (nota la virgola finale dopo banana).

C'è un modo per risolvere questo problema con puro CSS?

Answer 1

Per rimuovere la virgola finale, utilizzare il :last-child pseudo-classe, in questo modo:

#taglist li:last-child:after { 
    content: ""; 
} 

Answer 2

Dipende implementazione del browser, ma questo dovrebbe funzionare. Anche se si basa su first-child, che può limitare il suo uso, ma in sostanza mette lo spazio virgola ", " prima dell'elemento di elenco, piuttosto che dopo. Non sono sicuro di come il valore di padding/margin influirà su questo, ma se usi `display: inline; con margini e padding impostati su zero, dovrebbe essere a posto.

#taglist li:before {content: ", ";} 
#taglist first-child {content: ""; } /* empty string */ 

---

Modificato: di rispondere alle correzioni offerti nei commenti da Jakob.

Le seguenti opere (pagina demo qui: http://davidrhysthomas.co.uk/so/liststyles.html:

#taglist {width: 50%; 
     margin: 1em auto; 
     padding: 0; 
     } 

li  {display: inline; 
     margin: 0; 
     padding: 0; 
     } 

li:before {content: ", "; 
     } 

#taglist li:first-child:before 
     {content: ""; 
     } 

Anche se le virgole sono stranamente floating-in-the-middle-of-nulla, e, onestamente, preferisco la risposta accettata in ogni caso. ma solo in modo di non stava lasciando una risposta orribilmente rotto in giro, ho pensato di risolvere il problema.

grazie, Jakob.

Answer 3

non c'è modo puro CSS per farlo che è compatibile cross-browser (grazie a Microsoft). Io su credi di farlo solo con la logica lato server.

Probabilmente ci si avvicina all'utilizzo di una classe last sull'ultimo li e utilizzando le immagini di sfondo per tutte le lis ma l'ultima, ma non sarà possibile fare: last-child e contenuto: in IEs.

Answer 4

questo è il modo che i ragazzi di A List Apart raccomandano nel loro articolo “Taming Lists ":

#taglist ul li:after { 
    content: ","; 
} 

#taglist ul li.last:after { 
    content: ""; 
} 

Ciò richiede avere l'ultima voce nella lista contrassegnati con un valore di attributo class di ‘ultimo’:

<ul id="taglist"> 
    <li>apple</li> 
    <li>orange</li> 
    <li class="last">banana</li> 
</ul> 

Answer 5

Sostituire uno la regola

#taglist li:after { 
    content: ", "; 
} 

con solo un altro

#taglist li + li:before { 
    content: ", "; 
} 

Pro:

• Una regola fare tutto il lavoro.
• regole per cancellare la regola precedente,
• IE8 supporto

Answer 6

È facile con CSS3 è possibile utilizzare il selettore pseudo last-child e not in una volta:

ul#taglist li:not(:last-child):after { 
    content: ", "; 
} 

Controlla i risultati qui https://jsfiddle.net/vpd4bnq1/