Na zarovnanie zoznamov s odrážkami v HTML použite kód CSS.
Weboví dizajnéri používajú zoznamy odrážok na viac než len pridávanie odrážok a textu. Značka HTML, ktorá sa používa na vytváranie zoznamov s odrážkami, je užitočná na vytváranie ponúk alebo organizovanie obrázkov pre JavaScript, ktoré sa majú načítať do prezentácie. Naučiť sa používať kód kaskádových štýlov v spojení so zoznamami odrážok – v slangu HTML nazývané „neusporiadané zoznamy“ – vám otvorí niekoľko zaujímavých možností webového dizajnu.
Krok 1
Otvorte súbor HTML obsahujúci zoznam s odrážkami a pozrite sa medzi značky a smerom k hornej časti kódu. Pridajte značky, ak ešte nie sú prítomné. Ak váš kód obsahuje a tag niekde za tagom a to obsahuje odkaz na súbor CSS, potom namiesto toho otvorte tento súbor. Váš kód CSS ide medzi značky alebo na nový riadok vášho súboru CSS.
Video dňa
Krok 2
Zarovnajte text vo všetkých odrážkach nastavením "text-align" pre váš
- tag. The
- a a definovať ich ako súčasť jedného zoznamu. Keď zarovnáte text pre
- tag sa omotáva okolo
- tag, zarovnanie ovplyvní text v každej odrážke, ale nezarovná samotný zoznam naľavo alebo napravo od stránky. Tu je príklad kódu CSS na nastavenie „zarovnania textu“:
ul {zarovnanie textu: vpravo;}
Všimnite si, že odrážky sa nepohybujú s textom. Guľky v tomto prípade zostanú vľavo.
Krok 3
Zarovnajte celý zoznam naľavo alebo napravo od stránky nastavením „float“ pre váš
- tag. Keď je "float" nastavený doľava alebo doprava na a
- presunie celý zoznam s odrážkami doľava alebo doprava na stránke. Nastavte float takto:
ul {float: right;}
Môžete nastaviť "float" doľava alebo doprava, ale nie do stredu.
Krok 4
Zabaľte svoje
- značky v
a
značky na vytvorenie obalu, ktorý vycentruje zoznam s odrážkami na vašej stránke. Váš výsledný kód bude vyzerať takto:- Položka zoznamu
- Položka zoznamu
The
tag sám o sebe nič nevycentruje; na vycentrovanie všetkého musíte použiť CSS. Pridajte nasledujúci kód medzi svoje
