Wstawianie list wypunktowanych w HTML-u

Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 4004 razy

Wstawianie listy wypunktowanej w kodzie strony

Oto przykład utworzenia listy wypunktowanej:

<p>Lista pięciu największych jezior w Polsce:</p> <ul><li>Śniardwy</li> <li>Mamry</li> <li>Łebsko</li> <li>Dąbie</li> <li>Miedwie</li></ul>

Wynik działania powyższego kodu:

Lista pięciu największych jezior w Polsce:

  • Śniardwy
  • Mamry
  • Łebsko
  • Dąbie
  • Miedwie

Listy można zagnieżdżać:

<p>Lista pięciu największych jezior w Polsce:</p> <ul><li>Śniardwy <ul><li>powierzchnia: 11487,5 ha</li> <li>głębokość maksymalna: 23,4 m</li></ul> </li> <li>Mamry <ul><li>powierzchnia: 9851,0 ha</li> <li>głębokość maksymalna: 43,8 m</li></ul> </li> <li>Łebsko <ul><li>powierzchnia: 7020,0 ha</li> <li>głębokość maksymalna: 6,3 m</li></ul> </li> <li>Dąbie <ul><li>powierzchnia: 5408 ha</li> <li>głębokość maksymalna: 4,2 m</li></ul> </li> <li>Miedwie <ul><li>powierzchnia: 3491,0 ha</li> <li>głębokość maksymalna: 43,8 m</li></ul> </li></ul>

Wynik powyższego kodu:

Lista pięciu największych jezior w Polsce:

  • Śniardwy
    • powierzchnia: 11487,5 ha
    • głębokość maksymalna: 23,4 m
  • Mamry
    • powierzchnia: 9851,0 ha
    • głębokość maksymalna: 43,8 m
  • Łebsko
    • powierzchnia: 7020,0 ha
    • głębokość maksymalna: 6,3 m
  • Dąbie
    • powierzchnia: 5408 ha
    • głębokość maksymalna: 4,2 m
  • Miedwie
    • powierzchnia: 3491,0 ha
    • głębokość maksymalna: 43,8 m

Użyteczne style CSS

Dla znacznika <ul> dostępne są style specjalne, sterujące sposobem wyświetlania listy. Za pomocą stylu list-style-type można zmienić domyślny znacznik wypunktowania:

list-style-type: disc|circle|rect|none; /* ustawia znacznik listy wypunktowanej */

Przykład:

<p>Lista pięciu największych jezior w Polsce:</p> <ul style="list-style-type: circle"><li>Śniardwy</li> <li>Mamry</li> <li>Łebsko</li> <li>Dąbie</li> <li>Miedwie</li></ul>

Wynik działania powyższego kodu:

Lista pięciu największych jezior w Polsce:

  • Śniardwy
  • Mamry
  • Łebsko
  • Dąbie
  • Miedwie

Istnieje również możliwość stworzenia własnego pliku graficznego z znacznikiem i jego podpięcia w następujący sposób:

list-style-image: url('znacznik.gif');

Kolejny styl to list-style-position sterujący miejscem wyświetlania znaczników (razem z tekstem, czy oddzielnie):

list-style-position: inside|outside|initial|inherit;

W końcu znacznik list-style umożliwiający połączenie list-style-image i list-style-type:

list-style: square url('znacznik.gif');