HTML <ul> etiketi

Kurs önerileri:

<ul> Tanım ve kullanım

etiketi kullanarak sırasız (puantili) liste tanımlayın. <ul> etiketi ve <li> etiketi ile sırasız liste oluşturma.

İpucu:CSS kullanarakListe stillerini ayarlama.

İpucu:Sıralı listeler için lütfen <ol> etiketi.

Ayrıca bkz:

HTML Eğitimi:HTML Listesi

HTML DOM Referans Kılavuzu:Ul nesnesi

CSS Eğitimi:Liste stillerini ayarlama

Örnek

Örnek 1

Bir sırasız HTML listesi:

<ul>
  <li> Kahve </li>
  <li>Çay</li>
  <li> Milk </li>
</ul>

Kişisel Deneyim

Örnek 2

Farklı liste stilleri türlerini ayarlama (CSS kullanarak):

<ul style="list-style-type:circle">
  <li> Kahve </li>
  <li>Çay</li>
  <li> Milk </li>
</ul>
<ul style="list-style-type:disc">
  <li> Kahve </li>
  <li>Çay</li>
  <li> Milk </li>
</ul>
<ul style="list-style-type:square">
  <li> Kahve </li>
  <li>Çay</li>
  <li> Milk </li>
</ul>

Kişisel Deneyim

Örnek 3

Listede satır yüksekliğini genişletme ve küçültme (CSS kullanarak):

<ul style="line-height:180%">
  <li> Kahve </li>
  <li>Çay</li>
  <li> Milk </li>
</ul>
<ul style="line-height:80%">
  <li> Kahve </li>
  <li>Çay</li>
  <li> Milk </li>
</ul>

Kişisel Deneyim

Örnek 4

Listede bir diğer liste oluşturma (iç içe geçmiş liste):

<ul>
  <li> Kahve </li>
  <li> Çay </li>
    <ul>
      <li> Pu'er </li>
      <li>Yeşil çay</li>
    </ul>
  </li>
  <li> Milk </li>
</ul>

Kişisel Deneyim

Örnek 5

Daha karmaşık iç içe geçmiş listeler oluşturma:

<ul>
  <li> Kahve </li>
  <li> Çay </li>
    <ul>
      <li> Pu'er </li>
      <li> Yeşil Çay </li>
        <ul>
          <li> Biluochun </li>
          <li> Longjing </li>
        </ul>
      </li>
    </ul>
  </li>
  <li> Milk </li>
</ul>

Kişisel Deneyim

Genel Özellikler

<ul> Bu etiketler ayrıca HTML'deki Genel Özellikler.

olay özelliklerini destekler

<ul> Bu etiketler ayrıca HTML'deki Olay Özellikleri.

Varsayılan CSS Ayarları

Çoğu tarayıcı aşağıdaki varsayılan değerleri kullanarak görüntüleyecektir <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;
}

Kişisel Deneyim

Tarayıcı Desteği

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Destek Destek Destek Destek Destek