Jak wyrównać nieuporządkowaną listę w HTML

Autor: John Stephens
Data Utworzenia: 1 Styczeń 2021
Data Aktualizacji: 27 Listopad 2024
Anonim
Jak wyrównać nieuporządkowaną listę w HTML - Artykuły
Jak wyrównać nieuporządkowaną listę w HTML - Artykuły

Zawartość

Projektanci stron internetowych używają list „nieuporządkowanych” lub „zakładek”, aby nie tylko dodawać zakładki i tekst. Znacznik HTML używany do tworzenia nieuporządkowanych list jest przydatny do tworzenia menu i porządkowania obrazów w celu załadowania kodu JavaScript do prezentacji. Nauka korzystania z CSS (Cascading Style Sheet) wraz z tymi listami otworzy wiele możliwości projektowania stron internetowych. Wyrównanie list nieuporządkowanych jest bardzo ważną umiejętnością, którą należy poprawić.


Instrukcje

Użyj kodu CSS, aby wyrównać nieuporządkowane listy w HTML (Jupiterimages / Photos.com / Getty Images)
  1. Otwórz plik HTML zawierający nieuporządkowaną listę i przejrzyj znaczniki i , na górze kodu. Dodaj tagi> i jeśli nie są jeszcze obecne. Jeśli twój kod zawiera tag

  2. gdzieś po nim i zawiera odniesienie do pliku CSS, otwórz ten plik. Twój kod CSS przejdzie między> i lub w nowym wierszu pliku CSS.

  3. Wyrównaj tekst w zakładkach, ustawiając właściwość „wyrównywanie tekstu” znacznika

      . Dotyczy to tagów
    • i
    • zdefiniować je jako część jednej listy. Po wyrównaniu tekstu w tagu
        , wpłynie to na wszystkie elementy na liście, ale nie na samą listę po lewej lub prawej stronie. Przykład użycia kodu CSS do ustawienia właściwości „text-align”, użyj „ul {text-align: right;}”. Zauważ, że znaczniki nie poruszają się wraz z tekstem. W tym przypadku będą po lewej stronie.

  4. Wyrównaj całą listę po lewej lub prawej stronie, ustawiając właściwość „float” tagu

      . Ta właściwość wpływa na całą listę, przesuwając ją w lewo lub w prawo na stronie. Napisz kod „ul {float: right;}”.

      Możesz ustawić tę właściwość w lewo lub w prawo, ale nie w środku.


  5. Zaklej swoje tagi

      z tagami i aby utworzyć zawijanie, które wyśrodkuje listę na stronie. Kod będzie wyglądał następująco: „
      • Element listy
      • Element listy
      '.

      Tag nie wyrówna niczego samodzielnie; powinieneś użyć CSS do wyśrodkowania wszystkiego. Dodaj następujący kod między tagami> lub w pliku CSS, aby wyśrodkować listę: „div {display: block; text-align: center;} ul {display: inline-block; text-align: left;}”.