Jak stylizować nieuporządkowane listy w CSS jako tekst rozdzielany przecinkami

Question

Poszukuję sposobu na stylizację nieuporządkowanej listy w XHTML przy użyciu CSS tak, że jest on renderowany w linii, a elementy listy są oddzielone przecinkami.

Na przykład poniższa lista powinna być wyświetlana jako apple, orange, banana (uwaga na brakujący przecinek na końcu listy).

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

Obecnie używam następujący kod CSS do stylizacji tej listy, która prawie robi to, co chcę, ale renderuje listę jako apple, orange, banana, (Uwaga przecinek wleczonego po banana).

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

#taglist li { 
    display: inline; 
} 

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

Czy istnieje sposób rozwiązania tego problemu za pomocą czystego CSS?

Answer 1

Aby usunąć przecinek z tyłu, należy użyć pseudo-klasę :last-child, tak:

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

Answer 2

To zależy od implementacji przeglądarki, ale to powinno działać. Mimo że opiera się na first-child, co może ograniczać jego użycie, ale zasadniczo umieszcza przecinek przed tagiem pozycja, a nie po nim. Nie jestem pewien, w jaki sposób wpłyną na to, ale jeśli użyjesz `display: inline; przy marginesach i dopełnieniu ustawionym na zero, powinno być w porządku.

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

---

Zmieniano: odpowiedzieć w komentarzach korekt oferowanych przez Jakob.

następujące prace (strona demo tutaj: 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: ""; 
     } 

Chociaż przecinkami są dziwnie floating-in-the-middle-of-nigdzie, i, szczerze mówiąc, wolę zaakceptowane odpowiedź tak. ale tak na mnie nie pozostawiając potwornie złamane odpowiedź leżące wokół, pomyślałem, że powinienem go naprawić.

Dzięki Jakob.

Answer 3

nie ma css czysty sposób to zrobić to jest kompatybilne z różnymi przeglądarkami (dzięki do Microsoft) ggest po prostu robisz to z logiką po stronie serwera.

Prawdopodobnie można zbliżyć się przy użyciu klasy last na ostatnim li i używając obrazów tła dla wszystkich lisów, ale ostatnio, ale nie będzie w stanie zrobić: ostatnie dziecko i zawartość: w IE.

Answer 4

ten sposób, że faceci w A List Apart polecić w swoim artykule „Taming Lists„:

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

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

Wymaga to posiadania ostatnią pozycję na liście oznaczony z class wartość atrybutu «last»:

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

Answer 5

Wymień jeden reguła

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

z tylko jeszcze jeden

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

Plusy:

• Jedna zasada zrobić całą pracę.
• żadne zasady odwołać poprzednią regułę,
• IE8 Wsparcie

Answer 6

Łatwo z CSS3 można użyć selektora pseudo last-child i not naraz:

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

wyniki tutaj Zobacz https://jsfiddle.net/vpd4bnq1/