Użyj kodu CSS, aby wyrównać listy punktowane w HTML.
Projektanci stron internetowych używają list punktowanych nie tylko do dodawania punktorów i tekstu. Znacznik HTML używany do tworzenia list punktowanych jest przydatny do tworzenia menu lub organizowania obrazów, które JavaScript może załadować do pokazu slajdów. Nauczenie się używania kaskadowego kodu arkusza stylów w połączeniu z listami punktowanymi – zwanymi „listami nieuporządkowanymi” w slangu HTML – otworzy kilka ekscytujących możliwości projektowania stron internetowych.
Krok 1
Otwórz plik HTML zawierający wypunktowaną listę i spójrz między tagami i w kierunku górnej części kodu. Dodaj tagi, jeśli jeszcze ich nie ma. Jeśli twój kod zawiera tag gdzieś po tagu, i to zawiera odniesienie do pliku CSS, a następnie otwórz ten plik. Twój kod CSS znajduje się między tagami lub w nowym wierszu pliku CSS.
Wideo dnia
Krok 2
Wyrównaj tekst we wszystkich punktorach, ustawiając „text-align” dla swojego
- etykietka. ten
- oraz znaczniki, aby zdefiniować je jako część pojedynczej listy. Po wyrównaniu tekstu dla
- tag owija się wokół
- , wyrównanie wpływa na tekst w każdym punktorze, ale nie powoduje wyrównania samej listy do lewej lub prawej strony. Oto przykład kodu CSS do ustawienia „text-align”:
ul {wyrównanie tekstu: w prawo;}
Zwróć uwagę, że punktory nie poruszają się wraz z tekstem. Kule pozostają w tym przypadku po lewej stronie.
Krok 3
Wyrównaj całą listę do lewej lub do prawej strony, ustawiając „ruchomy” dla swojego
- etykietka. Gdy „float” jest ustawiony w lewo lub w prawo na a
- tag, przenosi całą listę punktowaną w lewo lub w prawo na stronie. Ustaw pływak w ten sposób:
ul {liczba: prawo;}
Możesz ustawić "pływak" w lewo lub w prawo, ale nie do środka.
Krok 4
Owiń swój
- tagi w
oraz
tagi, aby utworzyć opakowanie, które wyśrodkuje listę punktowaną na stronie. Twój wynikowy kod będzie wyglądał tak:- Element listy
- Element listy
ten
tag sam niczego nie wyśrodkowuje; musisz użyć CSS, aby wszystko wyśrodkować. Dodaj następujący kod między swoimi
