HTML <ul> etikett

  • Föregående sida <u>
  • Nästa sida <var>

Definition och användning

<ul> taggen för att definiera en oordnad (med punkter) lista.

Använd <ul> taggen och <li>-taggen för att skapa en oordnad lista.

Tips:Använd CSS för attStäll in liststilar.

Tips:För ordnade listor, använd <ol>-taggen.

Se också:

HTML-lärbok:HTML lista

HTML DOM-referencehandbok:Ul-objekt

CSS-lärbok:Ställ in liststilar

Exempel

Exempel 1

En oordnad HTML-lista:

<ul>
  <li>Kaffe</li>
  <li>Te</li>
  <li>osten</li>
</ul>

Prova själv

Exempel 2

Ställ in olika liststilar (använd CSS):

<ul style="list-style-type:circle">
  <li>Kaffe</li>
  <li>Te</li>
  <li>osten</li>
</ul>
<ul style="list-style-type:disc">
  <li>Kaffe</li>
  <li>Te</li>
  <li>osten</li>
</ul>
<ul style="list-style-type:square">
  <li>Kaffe</li>
  <li>Te</li>
  <li>osten</li>
</ul>

Prova själv

Exempel 3

Förstora och minska radhöjden i listan (använd CSS):

<ul style="line-height:180%">
  <li>Kaffe</li>
  <li>Te</li>
  <li>osten</li>
</ul>
<ul style="line-height:80%">
  <li>Kaffe</li>
  <li>Te</li>
  <li>osten</li>
</ul>

Prova själv

Exempel 4

Skapa en annan lista i listan (indrörda listor):

<ul>
  <li>Kaffe</li>
  <li>Té</li>
    <ul>
      <li>Pu'er</li>
      <li>Greentea</li>
    </ul>
  </li>
  <li>osten</li>
</ul>

Prova själv

Exempel 5

Skapa mer komplexa indrörda listor:

<ul>
  <li>Kaffe</li>
  <li>Té</li>
    <ul>
      <li>Pu'er</li>
      <li>Grön te
        <ul>
          <li>Biluochun</li>
          <li>Longjing</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>osten</li>
</ul>

Prova själv

Globala egenskaper

<ul> Etiketter stöder också Globala egenskaper i HTML.

händelseegenskaper

<ul> Etiketter stöder också Händelseegenskaper i HTML.

Standard CSS-inställningar

De flesta webbläsare kommer att använda följande standardvärden för att visa <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;
}

Prova själv

Webbläsarstöd

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Stöd Stöd Stöd Stöd Stöd
  • Föregående sida <u>
  • Nästa sida <var>