List-style-position

CSS vlastnost list-style-position určuje, jestli bude odrážka v textu nebo vedle něj.

list-style-position
hodnoty pozice odrážky
outside odrážka je umístěna vlevo od bloku textu, řádky začínají pod sebou
inside odrážka je umístěna hned vedle textu, takže druhý řádek je i pod odrážkou

Outside je normální hodnota odrážky. Odrážkami myslím grafické značky vedle tagů <li> v nečíslovaném (<ul>) nebo číslovaném seznamu (<ol>). Hodnota inside se v praxi téměř nepoužívá, asi protože neodsazený druhý řádek vypadá hnusně.

Lépe lze vyladit pozici odrážky pomocí vlastností margin-left, padding-left a text-indent. Ale není to žádná sláva, protože okraje různých objektů seznamů (ol, ul, li) počítá každý prohlížeč úplně jinak. Explorer chápe levý okraj jako margin prvku ul (ale pouze v případě, že se použije list-style-position: outside nebo bez hodnoty), Mozilla jako padding prvku ul. Netuším, kterou vlastností stanovuje Explorer levý okraj seznamu, použije-li se list-style-position: inside. Předem varuji před různým hraním -- vyladit seznam (zejména obrázkový) tak, aby vypadal ve všech moderních prohlížečích stejně, je pěkná dřina a osobně si vůbec nejsem jistý, zda je to vůbec možné udělat.

Při nastavení list-style-position: inside se odrážka (případně obrázek odrážky) stává součástí elementu <li>, ale zachovává si nějaký odstup od textu (lepí se na levý okraj). Pokud se nastaví obrázková odrážka (list-style-image), v Mozille se lepí na levý okraj a je na středu řádku (což je v pohodě), ale v Exploreru a v Opeře se lepí na text a je moc nahoře (nic nepomáhá).

Podpora

Podpora vlastnosti list-style-position
Prohlížeč Podpora ve verzích Poznámka
Internet Explorer 4, 5, 5.5, 6 IE 4 kreslí odrážku přes rámeček při hodnotě outside (Pixy)
Firefox všechny verze  
Opera 4, 5, 6, 7  
Chrome ano  
Konqueror ano při hodnotě inside a display: list-item nevykreslí zbytek stránky (Pixy)

Příklady

Přímý zápis zanořené odrážky:

<ul>
<li style="list-style-position: inside">text za zanořenou odrážkou</li>
</ul>

Jinak je to fakt na nic.

Častý dotaz

Jak udělat obrázkovou odrážku tak, aby byla ve všech prohlížečích na přesně stejném místě?

Odpověď: nejde to.

Řešením je zapomenout na odrážky. Objektu dát list-style-type: none;, přidat mu levý padding a nastavit přesně napozicovaný obrázek na pozadí.

 

Reklama

www.webhosting-c4.cz, extra rychlý SSD webhosting s doménou v ceně
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.