HTML <ul> Merker


Voorbeeld

'n Ongeordende HTML-lys:

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Meer "Probeer dit self" voorbeelde hieronder.


Definisie en gebruik

Die <ul>merker definieer 'n ongeordende (kolpunte) lys.

Gebruik die <ul>merker saam met die <li> -merker om ongeordende lyste te skep.

Wenk: Gebruik CSS om lyste te styl .

Wenk: Vir geordende lyste, gebruik die <ol> -merker. 


Blaaierondersteuning

Element
<ul> Yes Yes Yes Yes Yes

Globale eienskappe

Die <ul>merker ondersteun ook die Global Attributes in HTML .


Gebeurtenis eienskappe

Die <ul>merker ondersteun ook die gebeurteniskenmerke in HTML .



Meer voorbeelde

Voorbeeld

Stel die verskillende lysstyltipes (met CSS):

<ul style="list-style-type:circle">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ul style="list-style-type:disc">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ul style="list-style-type:square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Voorbeeld

Brei uit en verminder lynhoogte in lyste (met CSS):

<ul style="line-height:180%">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ul style="line-height:80%">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Voorbeeld

Skep 'n lys binne 'n lys ('n geneste lys):

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

Voorbeeld

Skep 'n meer komplekse geneste lys:

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea
        <ul>
          <li>China</li>
          <li>Africa</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

Verwante bladsye

HTML-tutoriaal: HTML-lyste

HTML DOM verwysing: Ul Object

CSS-tutoriaal: Stileerlyste


Verstek CSS-instellings

Die meeste blaaiers sal die <ul>element met die volgende verstekwaardes vertoon:

Voorbeeld

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