Inzerce na portálu

Číslovaný seznam. Příklady stylového designu ul li seznamů CSS Výchozí styl

Seznamy mohou být číslované nebo nečíslované.

Číslované seznamy se vypisují s kódem:

    Seznam s čísly
  1. odstavec 1
  2. bod 2
  3. bod 3

Nečíslované seznamy se zobrazí s následujícím kódem:

    Seznam se zaškrtnutím nebo jinými symboly
  • odstavec 1
  • odstavec 1
  • odstavec 1

Každá položka v libovolném seznamu je uzavřena v li tagu. Všechny položky seznamu jsou uzavřeny v jednom společném ul nebo ol tagu. Styly těchto značek jsou zapsány v šabloně stylů.

Každé značce je přiřazen specifický styl designu. Označují odrážky z textu.

U číslovaného seznamu jsou styly číslování určeny pro každou položku.

Standardní arabské číslice jsou popsány desetinnou hodnotou.

list-style-type: desítkové; /*arabské číslice*/

U seznamu s odrážkami určete styl znaků – čtverce nebo kolečka.

list-style-type: kruh; /*kruhy*/
list-style-type: square; /*čtverečky*/

Každé položce nabídky lze přiřadit obrázek.

list-style-image: url('cesta k obrázku');

Typicky je v šablonách číslovaný seznam formátován jednoduchými čísly a nečíslovaný seznam je formátován černými čtverci a kroužky. Je to nudné a bez výrazu. Pojďme to napravit.

Kde jsou styly seznamu zapsané v šabloně Twenty Eleven?

Otevřete soubor style.css. Najděte sekci s názvem /* Textové prvky */

Standardní kód vypadá takto:

Jak vytvořit číslovaný seznam?

Číslovaný seznam pomocí pozadí

Podívejte se na tento roztomilý design číslovaného seznamu.

Jako? zopakujme.

Najděte styly pro značku ol. Přidejte do něj nové vlastnosti.

Ol ( padding: 0px 0 0 20px; okraj: 0,5 em 0 1,571 em 1,9 em; barva: #2E2E2E; list-style-type: none; font: 15px/17px Verdana, Arial, Helvetica, sans-serif; z-index : 2; counter-reset: point ) ol li ( margin-bottom: 4px; line-height: 1.6; color: #2E2E2E; position: relativní; ) ol li:before ( margin-bottom: 4px; counter-increment: bod 1: 24px pozadí: #BDC3C7; font-weight: bold;

Abyste pochopili, kde a co musíte změnit, aby vyhovoval vašemu návrhu, pojďme si tento kód rozebrat kousek po kousku.

list-style-type: none; — zakáže výstup standardních čísel
protireset: bod; — nastaví proměnnou pro počítadlo číslování
poloha: relativní; — umístí číslování vedle samotných položek

předtím je pseudo prvek pro značku ol li. Má následující styly:
obsah: pult(bod); — zobrazuje hodnotu proměnné
protipřírůstek: bod 1; — zvýší počítadlo o 1
pozice: absolutní;
pozadí: #BDC3C7; — pozadí pro čísla (pozadí lze nastavit barvou nebo krásnou ikonou
margin – vnější okraje
polstrování – vnitřní polstrování
barva – barva textu prvku
pozadí – pozadí
text-align – zarovnání textu
font-weight – tloušťka písma (saturace)

Ve svých stylech můžete nastavit libovolné barvy, zarovnání, velikosti písma a odsazení.

Číslovaný seznam s jedinečným obrázkem pro každou položku

Jeden web pro ženy má velmi atraktivní číslované seznamy.

Jak je to implementováno? Podívejme se na následující kód:

/*první číslo*/ ol li:first-child (list-style-image: url(cesta k obrázku s číslem 1); ) /*druhé číslo*/ ol li:nth-child(2n) (list-style- image: url(cesta k obrázku s číslem 2 ) /*třetí číslo*/ ol li:nth-child(3n) (list-style-image: url(cesta k obrázku s číslem 3); ) /*); čtvrté číslo */ ol li:nth-child(4n) (list-style-image: url(cesta k obrázku s číslem 4); ) /*Dále napíšeme úplně stejně jen pro další čísla položek*/

V kódu pro takovýto číslovaný seznam je potřeba uvést všechna čísla položek a každému z nich přiřadit jedinečnou ikonu.

Pokud používáte až 20 očíslovaných položek v seznamech v článcích, musíte pseudotřídu nth-child(An) napsat 20krát. Takže poslední ve stylech je pseudotřída n-té dítě(20n).

Najděte v souboru stylů řádky, které popisují návrh číslovaného seznamu (tagy ol li).

Přidejte k němu pseudotřídu prvního potomka. Zkopírujte a vložte jej jednou, poté změňte tuto vlastnost na nth-child(An) a zkopírujte tolik čísel, kolik chcete mít vlastní ikonu. Zadejte čísla položek.

Ke každému číslu přidejte vlastnost list-style-image s vlastní jedinečnou ikonou.

Pokud jsou ikony na webu umístěny daleko od položek nebo je překrývají, musíte upravit zarovnání a odsazení digitálních ikon nebo textu položek.

Jak vytvořit seznam s odrážkami (nečíslovaný)?

Seznam s odrážkami ul li se střídajícími se ikonami

Tento seznam s odrážkami se mi opravdu líbil.

Ul ( padding: 11px 0 5px 0; ) ul li ( padding-left: 32px; margin-bottom: 10px; font: normal 15px Verdana, sans-serif; color: #2E2E2E; line-height: 1.6; border-bottom: 1px přerušovaná #ccc: 10px; ("images/sprite.jpg") 0px 2px no-repeat-type: circle ) ul li:nth-child(2n):before ( content: ""; position: absolute; width: 27px; height; : 43px-left: -35px pozadí: url("obrazky/sprite.jpg") 0px -17px no-repeat;

Místo standardního typu list-style-type můžete přiřadit vlastnost „cesta k ikoně“ - list-style-image:url. Pak je ale potřeba určit vnější levý okraj od okrajů webu – bez něj se ikony nezobrazí a budou přesahovat oblast obsahu.

Experimentu můžete přiřadit odsazení:

Ul li( list-style-image: url(images/radio.png); margin-left: 30px; )

Střídání ikon lze nastavit pomocí vlastnosti nth-child(An). Výše uvedený příklad používá pseudoprvek before.

Kód obsahuje jednu pseudotřídu nth-child(2n). Jeho hodnota je 2. Ukazuje se, že každý sudý bod odpovídá jiné ikoně. Pokud místo 2n napíšete 2n+1, objeví se na lichých bodech další ikona.

Pro každou položku seznamu můžete zadat podtržítko. Ve výše uvedeném příkladu jsou body podtrženy tečkovanými čarami.

Každé položce můžete také přiřadit rámečky, pozadí a ikony. Jen to nepřeháněj. Naším cílem není všechny strhnout efektním designem, ale zlepšit kvalitu vnímání obsahu.

Jak zobrazit několik seznamů s různými vzory na stránce?

Někdy je potřeba umístit několik seznamů s různými styly.

Pokud přiřadíte společné styly, bude všem seznamům přiřazen stejný design. Různé seznamy lze zobrazit, pokud značce ol nebo ul přiřadíte samostatné id a zadáte jej v html režimu úpravy článku. V souboru stylů pro toto ID musíte napsat samostatné styly.

Zde je například jedna pěkná možnost designu obsahu:

V HTML byste zapsali seznam takto:

    Obsah
  1. odstavec 1
  2. bod 2
  3. bod 3

V CSS byste napsali styly jako tento:

Ol#sod( padding: 0px 20px 10px 51px; margin: 0,5em 0 0em 1em; barva: #2E2E2E; list-style-type: none; background: #f1f4f5; border-left: #BDC3C7 4px solid; display: inline- block ) ol#sod li() ol#sod li:before( font-weight:normal !důležité )

Nový styl se od hlavního liší v designu původní značky: pozadí, styl zobrazení, řádek vlevo od obsahu.

Použitím několika seznamů různého designu v textu učiníte prezentaci informací ještě zajímavější. Při výpisu libovolných položek si můžete nastavit nějaké ikony a při výpisu akcí zase jiné. Zde je design omezen pouze vaší fantazií.

Tyto metody jsou také použitelné při návrhu položek menu, nadpisů a jakýchkoli dalších prvků webu.

Jak vytvořit kotevní odkazy v seznamu obsahu?

Jak je napsat v HTML kódu? Jeden kus kódu rámuje kotvu odkazu a další kus kódu je umístěn vedle místa, kam potřebujeme být přesměrováni při kliknutí na odkaz.

    Obsah
  1. Nadpis 1
  2. Nadpis 2
  3. Nadpis 3

A v textu článku musíte napsat toto:

Nadpis 1… Nadpis 2… Nadpis 3…

Možná mě zkušenější webmasteři v něčem opraví. Jednoduše radím to, co jsem sám vyzkoušel v praxi.

Pokud máte ještě nějaké dotazy, rád je uvidím v komentářích.

Ageeva Veronica.

Mohlo by vás také zajímat:

Popis

Atributy

obrácený: Určuje, že prvky seznamu budou v sestupném pořadí (namísto vzestupného). Možné hodnoty booleovský atribut:

        Poznámka: Podporován je pouze atribut obrácený Prohlížeče Chrome a Safari.

        Začátek: Nastaví počáteční celočíselnou hodnotu, od které bude začínat číslování prvků v seznamu. Příklad » typ: Definuje typ značky, který se má použít pro položky seznamu:

        • 1 - desetinná čísla (1, 2, 3, 4 ...).
        • A- Latinská písmena v abecedním pořadí, velká písmena (A, B, C, D...).
        • A- Latinská písmena v abecedním pořadí, in malá písmena(abeceda...).
        • já- Římské číslice velkými písmeny (I, II, III, IV ...).
        • i- římské číslice malými písmeny (i, ii, iii, iv ...).
        Příklad »

        Štítek

          podporuje také globální atributy a události

          Výchozí styl

          ol ( display: block; list-style-type: decimal; margin-top: 1 em; margin-bottom: 1 em; margin-left: 0; margin-right: 0; padding-left: 40px; )

          Příklad

          1. Káva
          2. Čaj
          3. Mléko
          1. Káva
          2. Čaj
          3. Mléko
          HTML tagy

          Význam a aplikace

          Číslovaný (seřazený) seznam je pro položky, které se objevují v určitém pořadí. Číslovaný seznam začíná značkou

            (zkratka pro angličtinu objednaný seznam- uspořádaný seznam). Každý prvek seznamu začíná značkou
          1. (prvek seznamu).

            Podpora prohlížeče

            Atribut
            Opera
            IExplorer
            Okraj
            start, typAnoAnoAnoAnoAnoAno
            obrácenýAnoAnoAnoAnoNeNe

            Atributy

            AtributVýznamPopis
            kompaktníkompaktníNení podporováno v HTML5.
            Určuje, že seznam by měl být menší než normální velikost (výška řádku: 80 %).
            Místo tohoto atributu použijte CSS.
            obrácenýUrčuje, že pořadí v číslovaném (seřazeném) seznamu by mělo být sestupné. Atribut není podporován prohlížeči internet Explorer a Edge.
            StartčísloDefinuje počáteční hodnotu číslovaného (seřazeného) seznamu. Hodnoty musí být celá čísla, záporné hodnoty jsou povoleny. Při použití s ​​písmeny (typ = "A" a typ = "a") je číslo uvedené v hodnotě atributu pořadové číslo písmene v abecedě. Například start = "4" bude odpovídat písmenu "D" a seznam bude začínat jí. Při použití hodnoty start = "27" se počítadlo vynuluje a seznam se změní na dvoumístný ("27" = "AA", "28" = "AB", "29" = "AC".. .).
            typ1 (výchozí)
            Velký)
            a (malá písmena)
            já (římský velký)
            i (římský malý)            		Definuje typ odrážky, která se používá při vytváření číslovaného (uspořádaného) seznamu.

            Příklad použití

            Příklad použití značky <ol> <span>
            1. První bodDruhý bod
            2. Třetí bod


              3. Na stránce to bude vypadat takto:

              1. První bod.
              2. Druhý bod.
              3. Třetí bod.

              Pokud chcete, aby seznam začínal konkrétním číslem (nikoli 1), musíte pro značku zadat počáteční atribut

                .

                Například:

                  Dalším zajímavým atributem je typ , který vám umožní zadat abecední číslování („A“ – velká písmena, „a“ – malá písmena), nebo římské číslice („I“ – velká písmena, „i“ – malá písmena).

                  Podívejme se na příklad, který představuje všechny možné hodnoty pro atribut type (jiné než výchozí hodnota):

                  Příklad použití atributu type HTML tagu<оl>
                    >
                  1. První bodDruhý bod
                  2. Třetí bod
                      3. >
                    1. První bodDruhý bod
                    2. Třetí bod
                        3. >
                      1. První bodDruhý bod
                      2. Třetí bod
                          3. >
                        1. První bodDruhý bod
                        2. Třetí bod


                          3. Vezměte prosím na vědomí, že je povoleno vytvářet číslované (uspořádané) seznamy vnořené do jiných číslovaných seznamů (uvnitř prvku seznamu

                        3. ):

                          Příklad číslovaného seznamu vnořeného do jiného číslovaného seznamu <span>
                          1. První bod
                            1. První bodDruhý bod
                            2. Třetí bod
                              3. Druhý bod
                            3. Třetí bod


                              4. Na stránce to bude vypadat takto.

                              HTML seznamy slouží k seskupování souvisejících informací. Existují tři typy seznamů:

                              seznam s odrážkami —

                                - každý prvek seznamu
                              • označeno fixem,
                                číslovaný seznam —
                                  - každý prvek seznamu
                                1. označený číslem
                                  seznam definic- - se skládá z výrazových dvojic
                                  —
                                  definice.

                                  Každý seznam je kontejner, ve kterém jsou umístěny prvky seznamu nebo dvojice termín-definice. Prvky seznamu se chovají jako prvky bloku, jsou naskládány pod sebou a zabírají celou šířku bloku kontejneru. Každá položka seznamu má na straně další blok, který se nepodílí na rozvržení.

                                  Vytváření HTML seznamů

                                  1. Seznam s odrážkami

                                  Seznam s odrážkami je neuspořádaný seznam (z anglického neuspořádaného seznamu). Vytvořeno pomocí spárované značky

                                  . Značka prvku seznamu je štítek, například vyplněný kruh.

                                  Prohlížeče ve výchozím nastavení přidávají do bloku seznamu následující formátování:

                                  Každý prvek seznamu je vytvořen pomocí párového tagu

                                2. (z anglické položky seznamu).
                                  dostupný .
                                • Microsoft
                                • Google
                                • Jablko
                                Rýže. 1. Seznam s odrážkami

                                2. Číslovaný seznam

                                Číslovaný seznam je vytvořen pomocí spárovaného tagu. Každá položka seznamu je také vytvořena pomocí prvku

                              • . Prohlížeč čísluje prvky v pořadí automaticky, a pokud smažete jeden nebo více prvků takového seznamu, zbývající čísla se automaticky přepočítají.

                                Blok seznamu má také výchozí styly prohlížeče:

                              • K dispozici je atribut value, který umožňuje změnit výchozí číslo pro vybranou položku seznamu. Například pokud pro první položku v seznamu, kterou nastavíte
                              • , pak bude zbývající číslování přepočítáno vzhledem k nové hodnotě.

                                Pro značku

                                  K dispozici jsou následující atributy:

                                  Tabulka 1. Atributy značek
                                  Atribut Popis, přijatá hodnota
                                  obrácený Atribut obrácený způsobí, že se seznam zobrazí v obráceném pořadí (například 9, 8, 7...).
                                  Start Atribut start určuje počáteční hodnotu, od které bude číslování začínat, například konstrukce
                                    první položce bude přiděleno sériové číslo „10“. Zároveň můžete zadat typ číslování, např.
                                      .
                                  typ Atribut type určuje typ značky, která se má v seznamu použít (písmena nebo čísla). Přijímané hodnoty:
                                  1 — výchozí hodnota, desítkové číslování.
                                  A — číslování seznamu v abecedním pořadí, velká písmena (A, B, C, D).
                                  a — číslování seznamu v abecedním pořadí, malá písmena (a, b, c, d).
                                  I - číslování římskými velkými číslicemi (I, II, III, IV).
                                  i — číslování římskými malými číslicemi (i, ii, iii, iv).
                                  1. Microsoft
                                  2. Google
                                  3. Jablko
                                  Rýže. 2. Číslovaný seznam

                                  3. Seznam definic

                                  Seznamy definic jsou vytvořeny pomocí značky

                                  . Chcete-li přidat výraz, použijte značku
                                  a pro vložení definice - tag
                                  .

                                  Blok seznamu definic má následující výchozí styly prohlížeče:

                                  Pro značky

                                  ,
                                  A
                                  dostupný .

                                  Ředitel:
                                  Petr Točilin
                                  Obsazení:
                                  Andrej Gaidulyan
                                  Alexej Gavrilov
                                  Vitalij Gogunskij
                                  Marija Koževnikovová

                                  Rýže. 3. Seznam definic

                                  4. Vnořený seznam

                                  Možnosti jednoduchých seznamů často nestačí, například při vytváření obsahu se bez nich neobejdete vnořené položky. Označení pro vnořený seznam by bylo následující:

                                  • odstavec 1
                                  • bod 2.
                                    • Článek 2.1.
                                    • Článek 2.2.
                                      • Článek 2.2.1.
                                      • Článek 2.2.2.
                                    • Článek 2.3.
                                  • bod 3.

                                  Rýže. 4. Vnořený seznam

                                  5. Víceúrovňový číslovaný seznam

                                  Víceúrovňový seznam se používá k zobrazení položek seznamu na různých úrovních s různým odsazením. Označení pro víceúrovňový číslovaný seznam by bylo následující:

                                  1. odstavec
                                  2. odstavec
                                    1. odstavec
                                    2. odstavec
                                    3. odstavec
                                      1. odstavec
                                      2. odstavec
                                      3. odstavec
                                    4. odstavec
                                  3. odstavec
                                  4. odstavec

                                  Toto výchozí označení vytvoří nové číslování pro každý vnořený seznam, počínaje jedničkou. Chcete-li vytvořit vnořené číslování, musíte použít následující vlastnosti:
                                  counter-reset resetuje jeden nebo více čítačů, specifikuje hodnotu, která má být resetována;
                                  čítač-přírůstek udává hodnotu přírůstku čítače, tzn. v jakých přírůstcích bude každá následující položka očíslována;
                                  obsah - generovaný obsah, v tomto případě zodpovídá za zobrazení čísla před každou položkou seznamu.

                                  Ol ( /* odebere standardní číslování */ list-style: none; /* Identifikujte počítadlo a pojmenujte jej li. Hodnota počítadla není zadána - ve výchozím nastavení je 0 */ counter-reset: li; ) li :before ( /* Definujeme prvek, který bude očíslován - li Pseudoprvek před označuje, že obsah vložený pomocí vlastnosti content bude umístěn před položky seznamu. Zde se nastavuje hodnota přírůstku čítače (výchozí je 1 */ counter-increment: li / * Vlastnost content zobrazuje číslo položky seznamu counters() znamená, že vygenerovaný text představuje hodnoty všech čítačů s tímto názvem mezi čísla a před obsah každé položky seznamu se přidá tečka s mezerou */ content: counters(li,"") "."
                                  Rýže. 5. Víceúrovňový číslovaný seznam

                              Úkol

                              Zobrazit seznam s odrážkami vodorovně bez odrážek.

                              Řešení

                              Štítek seznam s odrážkami

                                ve výchozím nastavení zobrazuje prvky
                              • vertikálně nad sebou. Pro vytvoření navigačních prvků je v některých případech vhodné zobrazit seznam vodorovně. Existuje několik způsobů, jak dosáhnout tohoto zobrazení seznamu.

                                Už byste měli vědět, že HTML má blokové a vložené prvky. Inline elementy nevytvářejí vlastní bloky příkladem takových elementů jsou tagy resp . Prvky bloku se zobrazí na novém řádku a vytvoří obdélníkový blok, příklad takových značek

                                nebo

                                Takže tady je značka

                              • je také blokovým prvkem.

                                Označit

                              • nechoval jako blokový prvek, můžete jej vložit pomocí CSS.

                                Zobrazení vlastnosti CSS určuje, jak bude prvek zobrazen v dokumentu. Podívejme se na tři jeho významy (i když jich je více):

                                • blok - prvek se zobrazí jako prvek bloku.
                                • inline - prvek je zobrazen jako inline.
                                • inline-block - block-line element, přečtěte si více o tomto typu elementu níže, budeme jej používat.

                                Nejprve udělejme vodorovný seznam přeměnou jeho odrážek na vložené prvky. Ve stylu CSS napíšeme pravidlo, ve kterém je selektor li nastaven na vlastnost display s hodnotou inline .

                                Seznam vodorovně

                                • odstavec 1
                                • bod 2
                                • bod 3


                                Tento styl tedy fungoval a dostali jsme horizontální uspořádání položek seznamu:

                                Obrázek 1. Příklad č. 1 v práci.

                                Tato metoda má nevýhody. Faktem je, že inline prvky mají oproti blokovým prvkům určitá omezení. Například jim nelze dát šířku a výšku, ale blokovým ano.

                                Potřebujeme například, aby prvek nabídky, který vytvoříme, měl šířku 150px a výšku 40px. Zkusme změnit styl na následující, to znamená přidat dvě pravidla, která nastavují velikost položky nabídky:

                                Tyto úpravy nepovedou k žádným změnám. Aby bylo možné položky nabídky umístit vodorovně a bylo možné nastavit jejich šířku a výšku, musí nastavit typ na inline-block . Změňme náš ukázkový kód:

                                Seznam vodorovně

                                • odstavec 1
                                • bod 2
                                • bod 3


                                Tento kód funguje a změny jsou viditelné:


                                Obrázek 2. Příklad č. 2 v akci.

                                Mohou však existovat různé možnosti, například potřebujeme zobrazit vnořené seznamy v nabídce:

                                Vnořený seznam.

                                • Upravit
                                  • zrušení
                                  • Střih
                                  • kopírovat
                                  • Vložit
                                • Typ písma
                                  • tučně
                                  • kurzíva
                                  • Podtrženo
                                • Velikost
                                  • Malý
                                  • Normální
                                  • Průměrný
                                  • Velký


                                Zde je výsledek tohoto kódu:


                                Obrázek 3. Příklad č. 3 v práci.

                                Vidíme, že bloky nejsou výškově zarovnány, jak bychom chtěli. Samozřejmě můžete zadat stejnou výšku pro všechny bloky, ale ne vždy předem známe její přesnou hodnotu a může se změnit.

                                Ale vlastně, proč se to děje?

                                Naše bloky mají vlastnost zobrazení nastavenou na inline-block . To znamená, že mají vlastnosti jako blokové prvky(možnost určit šířku a výšku) a inline prvky. To, co vidíme, je kvalita inline prvků.

                                Podívejme se na řetězec se znaky "A" různých velikostí:

                                A A A A A A

                                Vidíme, že všechna písmena jsou svisle zarovnána podél spodního řádku. Přesněji řečeno podél základní linie, ale nezabírejme teď do plevele. Takže to samé se stalo s našimi bloky.

                                Chcete-li text zarovnat svisle, použijte vlastnost vertical-align. V našem příkladu č. 3 musíme použít hodnotu top , která zarovná horní okraj prvku k horní části nejvyššího prvku na řádku.

                                Nyní jej aplikujme na řetězec se znaky "A" různých velikostí:

                                A A A A A A

                                Zdá se, že písmena trochu "naskakují". Nastavil jsem okraj CSS na nejvyšší písmeno, abych ukázal, že ve skutečnosti nejsou žádné skoky, pouze prázdný prostor mezi horním okrajem (kde dochází k zarovnání) a horním bodem "A".

                                Vlastnost vertical-align musí být aplikována na každý vložený prvek, nedědí se. Můžete si přečíst více o této vlastnosti: vertical-align .

                                Po této odbočce budeme pokračovat v horizontálním umístění prvků seznamu.

                                Druhý způsob

                                Položky seznamu můžete umístit vodorovně pomocí vlastnosti float. Tato vlastnost určuje, na kterou stranu je prvek zarovnán, a má dvě polohy: vlevo a vpravo .

                                Zde je příklad použití tohoto kódu:

                                Seznam vodorovně

                                • odstavec 1
                                • bod 2
                                • bod 3


                                Zde je výsledek kódu:

                                Obrázek 4. Příklad práce.

                                Zdá se, že příklad funguje. Při používání této vlastnosti je ale jedno upozornění. Nyní se na to podíváme. Vezměme si například kód, ve kterém jsou dva horizontální seznam S v různých cestách uspořádání prvků vodorovně: zobrazení a plovoucí:

                                Seznam vodorovně

                                • odstavec 1
                                • bod 2
                                • bod 3
                                • odstavec 1
                                • bod 2
                                • bod 3


                                Zde je výsledek kódu:

                                Obrázek 5. Příklad práce.

                                V těchto příkladech seznam kontejnerů

                                  mají červený okraj o tloušťce 1 pixel. Ale horní seznam, který používá vlastnost display, obsahuje položky seznamu. Ale prvky seznamu vytvořeného pomocí vlastnosti float vypadnou ze svého kontejneru.

                                  Na první pohled vše funguje. Pojďme si ale seznamy vyměnit. Seznam s třídou menu-1 dáme do kódu před seznam s třídou menu-2 (nyní je nižší).

                                  Výsledkem je toto:

                                  Obrázek 6. Příklad práce.

                                  Položky ve spodním menu se také obtáčí kolem horního menu, protože efekt vlastnosti float nebyl zrušen a vztahuje se na všechny následující prvky.

                                  Jak tento problém vyřešit?

                                  Chcete-li to provést, musíte použít vlastnost clear, ruší obtékání prvku kolem jiného prvku, pokud má nastavenou vlastnost float.

                                  Zde je upravený příklad pomocí vlastnosti clear:

                                  Seznam vodorovně

                                  • odstavec 1
                                  • bod 2
                                  • bod 3
                                  • odstavec 1
                                  • bod 2
                                  • bod 3


                                  Je vidět, že spodní seznam se již neobtáčí kolem horního, prvky spolu nekolidují. Ale v prvním seznamu jsou značky

                                • jsou stále umístěny mimo kontejner
                                    .

                                    Obrázek 7. Příklad práce.

                                    Navíc v práci ne vždy víme, který prvek bude následovat prvek pomocí float. Ideální možností by bylo zavřít provoz vlastnosti float ve stejném bloku, ve kterém je otevřena.

                                    To se provádí pomocí pseudo prvku. Zde je kód:

                                    Seznam vodorovně

                                    • odstavec 1
                                    • bod 2
                                    • bod 3
                                    • odstavec 1
                                    • bod 2
                                    • bod 3


                                    Nyní máme 100% funkční kód.

                                    Obrázek 8. Příklad práce.

                                    Tato technika s vlastností float se obvykle používá při navrhování webových stránek k zarovnání sloupců, které jsou vytvořeny značkami

                                    . Získáme tak běžnou konstrukci sloupů s požadovaným výškovým vyrovnáním. Když vytváříme menu, ve většině případů pro nás výška bloků není důležitá, je téměř vždy stejná. Proto je použití pravidla (zobrazení: inline-block) v těchto případech zcela oprávněné.

                                    Ale pro úplnost tématu jsme se seznámili se všemi možné možnosti. Ačkoli mohou existovat i jiné způsoby, například pomocí tabulek CSS, vyhledávače důrazně doporučují používat tabulky pouze pro jejich zamýšlený účel, nikoli pro organizaci navigačních prvků nebo čehokoli jiného.