Cómo dar estilo a listas desordenadas en CSS como texto separado por comas

Question

Estoy buscando una forma de estilo de una lista desordenada en XHTML con CSS, de modo que se represente en línea y los elementos de la lista estén separados por comas.

Por ejemplo, la siguiente lista se debe representar como apple, orange, banana (tenga en cuenta la coma que falta al final de la lista).

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

Actualmente, estoy usando el siguiente CSS para estilizar esta lista, que casi hace lo que yo quiero, sino que hace la lista como apple, orange, banana, (nótese la coma final después de plátano).

#taglist { 
    display: inline; 
    list-style: none; 
} 

#taglist li { 
    display: inline; 
} 

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

¿Hay alguna manera de resolver este problema con CSS puro?

Answer 1

Para retirar la coma final, utilizar la pseudo-clase :last-child, así:

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

Answer 2

Depende de la aplicación del navegador, pero esto debería funcionar. Aunque depende de first-child, lo que puede limitar su uso, pero esencialmente pone el espacio de coma ", " antes del elemento de lista, en lugar de después. No estoy seguro de cómo padding/margin s afectará esto, pero si usa `display: inline; con márgenes y relleno ajustados a cero, debería estar bien.

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

---

Editado: para responder a las correcciones que se ofrecen en los comentarios por Jakob.

Los siguientes obras (página de demostración aquí: 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: ""; 
     } 

Aunque las comas se extraña flotando-en-el-medio-de-la nada, y, sinceramente, prefiero la respuesta aceptada de todos modos. pero para que lo de que no se iba una respuesta terriblemente rota por ahí, pensé que debería solucionarlo.

gracias, Jakob.

Answer 3

no hay manera de CSS puro para hacerlo que sea compatible entre navegadores (gracias a Microsoft). Yo soy Supongamos que lo hace con la lógica del servidor.

Probablemente pueda acercarse usando una clase last en la última li y usar imágenes de fondo para todas las lis pero la última, pero no podrá hacer: last-child y contenido: en IEs.

Answer 4

Esta es la forma en que los chicos de A List Apart recomiendan en su artículo “Taming Lists ":

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

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

Para ello es necesario tener el último elemento de la lista etiquetada con un valor de atributo class del ‘último’:

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

Answer 5

Reemplazar uno la regla

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

con simplemente otra

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

Pros:

• Una regla hacer todo el trabajo.
• No hay reglas para cancelar la regla anterior,
• IE8 de apoyo

Answer 6

Es fácil con CSS3 puede utilizar la pseudo selector de last-child y not a la vez:

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

Verificar resultados aquí https://jsfiddle.net/vpd4bnq1/