Niby banalny HTML…

Jest sobie HTML. Prezentujemy w nim listę elementów. Ponieważ jest to lista, na przykład lista cech, semantycznie wypada przedstawić ją jako <ul> lub <ol> (unordered/ordered list). Zarazem chcemy, by – bez zaśmiecania kodu HTML – wypisać ją po prostu jako ciągły tekst oddzielony przecinkami, np. „majonez, jajko, ananas„. Robimy to wyłącznie jako element prezentacji, nie samej treści w kodzie HTML. To też nie problem, prawda? Za pomocą CSS dodajemy przecinki za każdym elementem listy, z wyjątkiem ostatniego:

li::after {
  content: ", ";
}
li:last-child::after {
  content: "";
}

Niby wszystko działa… Lecz oto jeśli wewnątrz naszej listy umieścimy podlistę, Google Chrome płata nam figla. Jeżeli załamanie linii wypada po ostatnim elemencie podlisty, przecinek zawija się do drugiej linii, zamiast zostać w tej samej. Wygląda to paskudnie:

Co ciekawe, w Firefoksie problem nie występuje.

Jako ćwiczenie dla czytelnika pozostawiam pobawienie się tym przykładem na jsFiddle.

Podobne wpisy:

Zostaw komentarz

Proszę być grzecznym i mówić na temat :). Twój adres e-mail nie zostanie opublikowany.

XHTML: Możesz używać następujących tagów XHTML:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>