List-style-position
CSS vlastnost list-style-position určuje, jestli bude odrážka v textu nebo vedle něj.
| 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
| 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
