Tag <ul> HTML

  • Poprzednia strona <u>
  • Następna strona <var>

Definicja i użycie

<ul> tag do zdefiniowania nieuporządkowanej (z bulletami) listy.

Użyj <ul> tag i tag <li> do stworzenia nieuporządkowanej listy.

Wskazówka:Użyj CSS doUstaw styl listy.

Wskazówka:Dla uporządkowanej listy użyj <ol> tag.

Zobacz również:

Kurs HTML:Lista HTML

Podręcznik referencyjny HTML DOM:Obiekt Ul

Kurs CSS:Ustaw styl listy

Przykład

Przykład 1

Nieuporządkowana lista HTML:

<ul>
  <li>Kawa</li>
  <li>Tee</li>
  <li>mleko</li>
</ul>

Spróbuj sam

Przykład 2

Ustaw różne typy stylów listy (używając CSS):

<ul style="list-style-type:circle">
  <li>Kawa</li>
  <li>Tee</li>
  <li>mleko</li>
</ul>
<ul style="list-style-type:disc">
  <li>Kawa</li>
  <li>Tee</li>
  <li>mleko</li>
</ul>
<ul style="list-style-type:square">
  <li>Kawa</li>
  <li>Tee</li>
  <li>mleko</li>
</ul>

Spróbuj sam

Przykład 3

Rozszerzaj i zmniejsz wysokość wierszy w liście (używając CSS):

<ul style="line-height:180%">
  <li>Kawa</li>
  <li>Tee</li>
  <li>mleko</li>
</ul>
<ul style="line-height:80%">
  <li>Kawa</li>
  <li>Tee</li>
  <li>mleko</li>
</ul>

Spróbuj sam

Przykład 4

Stwórz inną listę w liście (wcięta):

<ul>
  <li>Kawa</li>
  <li>Té</li>
    <ul>
      <li>Pu'er</li>
      <li>Herbata</li>
    </ul>
  </li>
  <li>mleko</li>
</ul>

Spróbuj sam

Przykład 5

Stwórz bardziej złożone wcięte listy:

<ul>
  <li>Kawa</li>
  <li>Té</li>
    <ul>
      <li>Pu'er</li>
      <li>Herbata zielona</li>
        <ul>
          <li>Biluochun</li>
          <li>Longjing</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>mleko</li>
</ul>

Spróbuj sam

Globalne atrybuty

<ul> Tagi te wspierają również Globalne atrybuty HTML.

Atrybuty wydarzeń

<ul> Tagi te wspierają również Atrybuty wydarzeń w HTML.

Domyślne ustawienia CSS

Większość przeglądarek używa następujących wartości domyślnych do wyświetlania <ul> Element:

ul {
  display: block;
  list-style-type: disc;
  margin-top: 1em;
  margin-bottom: 1 em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}

Spróbuj sam

Obsługa przeglądarek

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Wsparcie Wsparcie Wsparcie Wsparcie Wsparcie
  • Poprzednia strona <u>
  • Następna strona <var>