0Pricing
HTML Academy · Lekcja

Listy zagnieżdżone i stylowanie list

Zagnieżdżać listy w innych listach i kontrolować ich wygląd.

Listy zagnieżdżone i stylowanie list to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.

Zagnieżdżanie list

Listy można zagnieżdżać wewnątrz elementów <li>:

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Backend
    <ul>
      <li>Node.js</li>
      <li>Python</li>
    </ul>
  </li>
</ul>

Prawidłowe zagnieżdżanie

Zagnieżdżona lista musi znajdować się wewnątrz elementu <li>, a nie być jego bezpośrednim dzieckiem <ul> lub <ol>:

<!-- WRONG: nested ul as direct child of outer ul -->
<ul>
  <ul>   <!-- INVALID -->
    <li>Item</li>
  </ul>
</ul>

<!-- CORRECT: nested ul inside li -->
<ul>
  <li>
    Parent item
    <ul>
      <li>Child item</li>
    </ul>
  </li>
</ul>

Style punktorów na wielu poziomach

Przeglądarki stosują różne domyślne punktory na każdym poziomie zagnieżdżenia:

<ul>
  <li>Level 1 — disc (filled circle)</li>  <!--  • -->
  <ul>
    <li>Level 2 — circle (open circle)</li>  <!--  ○ -->
    <ul>
      <li>Level 3 — square</li>             <!--  ▪ -->
    </ul>
  </ul>
</ul>

Resetowanie za pomocą CSS

Zastąp style zagnieżdżonych list za pomocą CSS:

ul, ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Style each level explicitly */
.nav > li > ul {
  padding-left: 1rem;
  list-style: disc;
}

Zagnieżdżone listy numerowane

Zagnieżdżone listy uporządkowane z różnymi typami:

<ol type="1">
  <li>Introduction
    <ol type="a">
      <li>Background</li>
      <li>Motivation</li>
    </ol>
  </li>
  <li>Methods
    <ol type="a">
      <li>Data collection</li>
    </ol>
  </li>
</ol>

Liczniki CSS do niestandardowego numerowania

Niestandardowe numerowanie hierarchiczne za pomocą liczników CSS:

ol {
  list-style: none;
  counter-reset: level1;
}
ol > li { counter-increment: level1; }
ol > li::before { content: counter(level1) '. '; }

ol ol {
  counter-reset: level2;
}
ol ol > li { counter-increment: level2; }
ol ol > li::before {
  content: counter(level1) '.' counter(level2) ' ';
}

Wzorzec nawigacji akordeonowej

Zagnieżdżona lista może stać się rozwijaną nawigacją boczną:

<ul class="tree-nav">
  <li>
    <details>
      <summary>Frontend</summary>
      <ul>
        <li><a href="/html">HTML</a></li>
        <li><a href="/css">CSS</a></li>
      </ul>
    </details>
  </li>
  <li><a href="/backend">Backend</a></li>
</ul>

Odstępy w zagnieżdżonych listach

Kontroluj wizualne wcięcie za pomocą CSS:

ul {
  padding-left: 1.5rem;  /* Controls indent at each level */
  margin: 0.5rem 0;
}

/* Tighter nested spacing */
ul ul {
  margin: 0.25rem 0;
  padding-left: 1.25rem;
}

Powtórzenie skrótu list-style

Wszystkie właściwości stylu listy połączone razem:

/* Shorthand: type position image */
ul {
  list-style: square inside;
}

/* Longhand equivalents: */
ul {
  list-style-type: square;
  list-style-position: inside;   /* inside or outside */
  list-style-image: none;
}

Własne ikony jako znaczniki listy

Używaj SVG lub emoji jako znaczników listy:

ul.checklist {
  list-style: none;
  padding: 0;
}

ul.checklist li::before {
  content: '✓ ';
  color: #22c55e;
  font-weight: bold;
}

/* Or with a background SVG */
ul.icon-list li {
  padding-left: 2rem;
  background: url('/icons/arrow.svg') no-repeat 0 0.2em;
  background-size: 1rem 1rem;
  list-style: none;
}

Dostępność zagnieżdżonych list

Zagnieżdżone listy a czytniki ekranu:

  • Czytniki ekranu informują o poziomie zagnieżdżenia i liczbie elementów
  • Głębokie zagnieżdżenie (4 lub więcej poziomów) jest mylące — należy ograniczyć się maksymalnie do 2–3 poziomów
  • Jeśli używasz list-style: none na zewnętrznej liście, dodaj role="list"

Szybkie sprawdzenie

Gdzie należy umieścić zagnieżdżoną listę wewnątrz listy zewnętrznej?

Podsumowanie: listy zagnieżdżone

Najważniejsze informacje o listach zagnieżdżonych:

  • Zagnieżdżaj listy wewnątrz <li> — nigdy bezpośrednio w <ul>
  • Domyślne style przeglądarek: disc → circle → square na każdym poziomie
  • Liczniki CSS umożliwiają niestandardową numerację hierarchiczną
  • Ogranicz zagnieżdżanie do 2–3 poziomów, aby ułatwić korzystanie z list
  • Używaj <details>+<summary> do tworzenia rozwijanej zagnieżdżonej nawigacji

Często zadawane pytania

Czy lekcja „Listy zagnieżdżone i stylowanie list” jest bezpłatna?

Tak — pełny tekst „Listy zagnieżdżone i stylowanie list” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Listy zagnieżdżone i stylowanie list”?

Zagnieżdżać listy w innych listach i kontrolować ich wygląd. Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć HTML Academy?

Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Listy zagnieżdżone i stylowanie list”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?

Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Listy nieuporządkowane: ul i li
  2. Listy uporządkowane: ol, start, reversed i type
  3. Listy opisów: dl, dt i dd
  4. Listy zagnieżdżone i stylowanie list
← Powrót do HTML Academy