Použijte kód CSS k zarovnání seznamů s odrážkami v HTML.
Weboví návrháři používají seznamy odrážek pro více než pouhé přidávání odrážek a textu. Značka HTML používaná k vytváření seznamů s odrážkami je užitečná pro vytváření nabídek nebo organizování obrázků pro JavaScript, které lze načíst do prezentace. Naučit se používat kód kaskádových stylů ve spojení se seznamy odrážek – v HTML slangu nazývané „neuspořádané seznamy“ – vám otevře několik vzrušujících možností webdesignu.
Krok 1
Otevřete soubor HTML obsahující seznam s odrážkami a podívejte se mezi značky a směrem k horní části kódu. Přidejte značky, pokud ještě nejsou přítomny. Pokud váš kód obsahuje a tag někde za tagem a to obsahuje odkaz na soubor CSS, pak tento soubor otevřete. Váš kód CSS jde mezi značky nebo na nový řádek vašeho souboru CSS.
Video dne
Krok 2
Zarovnejte text ve všech odrážkách nastavením "text-align" pro váš
- štítek. The
- a tagy, které je definují jako součást jednoho seznamu. Když zarovnáte text pro
- tag obtéká
- tag, zarovnání ovlivní text v každé odrážce, ale nezarovná samotný seznam na levou nebo pravou stranu stránky. Zde je příklad kódu CSS pro nastavení „zarovnání textu“:
ul {zarovnání textu: vpravo;}
Všimněte si, že odrážky se nepohybují s textem. Kulky v tomto případě zůstávají vlevo.
Krok 3
Zarovnejte celý seznam vlevo nebo vpravo od stránky nastavením "float" pro vaši
- štítek. Když je "float" nastaven doleva nebo doprava na a
- přesune celý seznam s odrážkami doleva nebo doprava na stránce. Nastavte plovák takto:
ul {plovoucí: vpravo;}
Můžete nastavit "float" doleva nebo doprava, ale ne do středu.
Krok 4
Zabalte svůj
- značky v
a
tagy k vytvoření obalu, který vycentruje seznam s odrážkami na vaší stránce. Váš výsledný kód bude vypadat takto:- Položka seznamu
- Položka seznamu
The
tag sám o sobě nic necentruje; musíte použít CSS k vycentrování všeho. Přidejte následující kód mezi své
