HTML <ul> Etiketi
Örnek
Sırasız bir HTML listesi:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.
Tanım ve Kullanım
<ul>
etiketi, sırasız (madde işaretli) bir liste tanımlar .
Sırasız listeler oluşturmak için etiketi <li><ul>
etiketiyle birlikte kullanın .
İpucu: Listelere stil vermek için CSS kullanın .
İpucu: Sıralı listeler için <ol> etiketini kullanın.
Tarayıcı Desteği
Element | |||||
---|---|---|---|---|---|
<ul> | Yes | Yes | Yes | Yes | Yes |
Genel Özellikler
Etiket ayrıca HTML'deki Global Nitelikleri<ul>
de destekler .
Etkinlik Özellikleri
Etiket ayrıca HTML'deki Etkinlik Niteliklerini<ul>
de destekler .
Daha fazla örnek
Örnek
Farklı liste stili türlerini ayarlayın (CSS ile):
<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>
Örnek
Listelerde satır yüksekliğini genişletin ve azaltın (CSS ile):
<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>
Örnek
Bir liste içinde bir liste oluşturun (iç içe liste):
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Örnek
Daha karmaşık bir iç içe liste oluşturun:
<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>
İlgili Sayfalar
HTML öğreticisi: HTML Listeleri
HTML DOM referansı: Ul Nesnesi
CSS Eğitimi: Stil Listeleri
Varsayılan CSS Ayarları
Çoğu tarayıcı, <ul>
öğeyi aşağıdaki varsayılan değerlerle görüntüler:
Örnek
ul {
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1 em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}