HTML <ul> tagi

  • Edellinen sivu <u>
  • Seuraava sivu <var>

Määritelmä ja käyttö

<ul> tagia määrittääksesi epäjärjestetyn (pisteellä olevan) luettelon.

Käytä <ul> tagia ja <li> -tagia luodaksesi luettelon.

Vinkki:Käytä CSS:ääAseta luettelotyyli.

Vinkki:Järjestetyille luetteloille käytä: <ol> -tagi.

Katso myös:

HTML-opas:HTML luettelo

HTML DOM -viittausoppas:Ul-objekti

CSS-opas:Aseta luettelon tyyli

Esimerkki

Esimerkki 1

Järjestämätön HTML-luettelo:

<ul>
  <li>Kahvi</li>
  <li>Tee</li>
  <li> Maido</li>
</ul>

Kokeile itse

Esimerkki 2

Aseta erilaisia luettelotyylejä (käyttäen CSS):

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

Kokeile itse

Esimerkki 3

Laajenna ja pienennä rivejä luettelossa (käyttäen CSS):

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

Kokeile itse

Esimerkki 4

Luo toinen luettelo luettelossa (sisäkkäinen luettelo):

<ul>
  <li>Kahvi</li>
  <li>Tee</li>
    <ul>
      <li>Pu-erh</li>
      <li>Greentea</li>
    </ul>
  </li>
  <li> Maido</li>
</ul>

Kokeile itse

Esimerkki 5

Luo monimutkaisempia sisäkkäisiä luetteloja:

<ul>
  <li>Kahvi</li>
  <li>Tee</li>
    <ul>
      <li>Pu-erh</li>
      <li>Viher tee</li>
        <ul>
          <li>Bi Luo Chun</li>
          <li>Lung Ching</li>
        </ul>
      </li>
    </ul>
  </li>
  <li> Maido</li>
</ul>

Kokeile itse

Globaalit ominaisuudet

<ul> Tagi tukee myös HTML:n globaalit ominaisuudet.

tapahtumavaihtoehdot

<ul> Tagi tukee myös HTML:n tapahtumavaihtoehdot.

Oletusarvoiset CSS-asetukset

Useimmat selaimet käyttävät seuraavia oletusarvoja näyttämiseen <ul> Elementti:

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

Kokeile itse

Selaimen tuki

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Tuki Tuki Tuki Tuki Tuki
  • Edellinen sivu <u>
  • Seuraava sivu <var>