HTML <li> -elementti

Määrittely ja käyttö

<li> Tunniste määrittelee luettelomerkin.

<li> Tunniste käyttää järjestettyä luetteloa (<ol>) ja luettelo (<ul>) ja valikko-lista (<menu>) sisällä.

Tavallisesti <ul> ja <menu>-elementissä luettelomerkit näytetään numeroasteikoina.

Tavallisesti <ol>-elementissä luettelomerkit näytetään numeroin tai kirjaimin.

Vinkki:Käytä CSS:ää:Aseta luettelon tyyli.

Katso myös:

HTML-opas:HTML-lista

HTML DOM -viittausLi-objekti

CSS-opas:Aseta luettelon tyyli

Esimerkki

Esimerkki 1

) järjestetty (<ol>) ja epäjärjestetty (<ul>) HTML-lista:

<ol>
  <li> Kahvi</li>
  <li>Teekanne</li>
  <li> Maido</li>
</ol>
<ul>
  <li> Kahvi</li>
  <li>Teekanne</li>
  <li> Maido</li>
</ul>

Kokeile itse

Esimerkki 2

Käytä value-ominaisuutta järjestetyssä luettelossa:

<ol>
  <li value="100">Kahvi</li>
  <li>Teekanne</li>
  <li> Maido</li>
  <li>Puhdas vesi</li>
  <li>Juoma</li>
  <li>Olut</li>
</ol>

Kokeile itse

Esimerkki 3

Aseta erilaisia luettelojen tyyliä (käytä CSS:ää):

<ol>
  <li> Kahvi</li>
  <li style="list-style-type:lower-alpha">Teekanne</li>
  <li> Maido</li>
</ol>
<ul>
  <li> Kahvi</li>
  <li style="list-style-type:square">Teekanne</li>
  <li> Maido</li>
</ul>

Kokeile itse

Esimerkki 4

Listaa luettelo listalle (sisäinen luettelo):

<ul>
  <li> Kahvi</li>
  <li> Tee</li>
    <ul>
      <li> Pu-erh</li>
      <li>绿茶</li>
    </ul>
  </li>
  <li> Maido</li>
</ul>

Kokeile itse

Esimerkki 5

Luo monimutkaisempi sisennetty lista:

<ul>
  <li> Kahvi</li>
  <li> Tee</li>
    <ul>
      <li> Pu-erh</li>
      <li> Viher tee</li>
        <ul>
          <li> Puerh</li>
          <li> Longjing</li>
        </ul>
      </li>
    </ul>
  </li>
  <li> Maido</li>
</ul>

Kokeile itse

Ominaisuus

Ominaisuus Arvo Kuvaus
value Numerot Vain <ol>-listoille. Määrittää listan alkuarvon. Seuraavat listan kohteet lisääntyvät tästä numerosta.

Globaalit ominaisuudet

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

tapahtumien ominaisuuksia

<li> Tagi tukee myös HTML:n tapahtumien ominaisuudet.

Oletusarvoiset CSS-asetukset

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

li {
  display: list-item;
}

Selaimen tuki

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Tuki Tuki Tuki Tuki Tuki