Zagnieżdżanie Listy HTML

Zagnieżdżanie list HTML

A gdybyśmy tak chcieli dany punkt listy rozwinąć i uzupełnić go o kolejne podpunkty, to jak możemy to osiągnąć? W tym celu musimy zawrzeć jedną listę w drugiej, czynność ta nazywana jest zagnieżdżaniem.

Ale jak to zawrzeć jedną w drugiej, w którym miejscu byśmy ją zawierali? Kolejną listę dodajemy do elementu listy, który ma być rozwinięty i wtedy dany element listy staje się głównym punktem, a lista z zagnieżdżonymi elementami staje się jego podpunktami.

<ol>
  <li>element listy</li>
  <li>element listy
    <ol>
      <li>element listy zagnieżdżonej</li>
      <li>element listy zagnieżdżonej</li>
    </ol>
  </li>
</ol>
  1. element listy
  2. element listy
    1. element listy zagnieżdżonej
    2. element listy zagnieżdżonej

Tytułem danej listy zagnieżdżonej staje się tekst elementu listy, w którym jest ona zagnieżdżona.

Zagnieżdżać możemy wszystkie rodzaje list, mało tego możemy je łączyć ze sobą.

<ol>
  <li>element listy</li>
  <li>element listy
    <ul>
      <li>element listy zagnieżdżonej</li>
      <li>element listy zagnieżdżonej</li>
    </ul>
  </li>
</ol>
  1. element listy
  2. element listy
    • element listy zagnieżdżonej
    • element listy zagnieżdżonej
Jeśli masz czas i ochotę sprawdź mój nowy projekt Zdalny Ninja. Jest to serwis poświęcony Pracy Zdalnej. Zachęcam Cię już teraz do wpisania się na listę osób, które jako pierwsze dowiedzą się, że projekt wystartował.