Textový element
<ul> <ol>
Seznamy. Nečíslovaný pro výčty, číslovaný tam, kde záleží na pořadí.
V náhledu vidíte, kam se dostaneme. Skrolujte dolů a postavíme to krok za krokem.
Zápis
Nečíslovaný seznam
ul (unordered list) je seznam, ve kterém nezáleží na pořadí. Každá položka je v elementu li.
Uvnitř ul smí být přímo jen li. Všechno ostatní patří do položek.
Zápis
Číslovaný seznam
ol (ordered list) použijte tam, kde na pořadí záleží: postup, návod, žebříček. Čísla doplní prohlížeč sám.
Když položku přidáte doprostřed, čísla se přepočítají samy.
Atributy
Vlastní číslování
ol má vlastní atributy. start určí, od jakého čísla se počítá, a reversed počítá pozpátku.
reversed je logický atribut: stačí ho napsat, hodnotu nemá.
Zápis
Seznam v seznamu
Vnořený seznam patří dovnitř položky li, ne mezi položky.
Styl
Odrážky a čísla v barvě
Odrážkám a číslům se říká marker a dají se stylovat pseudoelementem ::marker. Obarvíme je a položkám přidáme vzduch.
Styl
Vlastní odrážky
Nákupní seznam dostane místo teček zaškrtávátka. Výchozí odrážky vypneme a vlastní vložíme přes ::before.
Dlouhý seznam
Seznam ve sloupcích
Dlouhý seznam krátkých položek zabere spoustu místa na výšku. Vlastnost columns ho rozdělí do sloupců, které mají aspoň 160 pixelů.
Kolik sloupců to bude, rozhodne prohlížeč podle šířky. Na desktopu jsou tři.
Responzivita
Na telefonu sloupce ubudou samy
Na telefonu se vedle sebe nevejdou ani dva sloupce po 160 pixelech, a tak zbude jeden. Žádné @media, columns se přizpůsobí samo.
Stejný princip jako auto-fill v lekci Grid karet: řekněte nejmenší šířku a o počtu ať rozhodne prohlížeč.
Shrnutí
Kdy použít seznamy
Ano
ulpro výčty, kde nezáleží na pořadíolpro postupy a žebříčky- menu, výpisy karet, odkazy v patičce: to všechno jsou seznamy
Ne
- odrážky psané ručně pomlčkou na začátku řádku
- vnořený seznam mimo
li
Pro dvojice pojem–vysvětlení existuje ještě seznam definic dl s položkami dt a dd.