HTML <ul>แท็ก
ตัวอย่าง
รายการ HTML ที่ไม่เรียงลำดับ:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
แท็ ก<ul>กำหนดรายการที่ไม่เรียงลำดับ (สัญลักษณ์แสดงหัวข้อย่อย)
ใช้<ul>แท็กร่วมกับแท็ก<li>เพื่อสร้างรายการที่ไม่เรียงลำดับ
เคล็ดลับ:ใช้ CSS เพื่อจัด รูป แบบรายการ
เคล็ดลับ:สำหรับรายการสั่งซื้อ ให้ใช้ แท็ก <ol>
รองรับเบราว์เซอร์
| Element | |||||
|---|---|---|---|---|---|
| <ul> | Yes | Yes | Yes | Yes | Yes |
คุณสมบัติสากล
แท็ ก<ul>ยังสนับสนุน Global Attributes ในHTML
คุณสมบัติของเหตุการณ์
แท็ ก<ul>ยังสนับสนุนแอตทริบิวต์เหตุการณ์ใน HTML
ตัวอย่างเพิ่มเติม
ตัวอย่าง
ตั้งค่าประเภทสไตล์รายการต่างๆ (ด้วย 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>
ตัวอย่าง
ขยายและลดความสูงของบรรทัดในรายการ (ด้วย 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>
ตัวอย่าง
สร้างรายการภายในรายการ (รายการที่ซ้อนกัน):
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
ตัวอย่าง
สร้างรายการซ้อนที่ซับซ้อนมากขึ้น:
<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>
หน้าที่เกี่ยวข้อง
กวดวิชา HTML: รายการ HTML
การอ้างอิง HTML DOM: Ul Object
กวดวิชา CSS: รายการจัดแต่งทรงผม
การตั้งค่า CSS เริ่มต้น
เบราว์เซอร์ส่วนใหญ่จะแสดง<ul>องค์ประกอบด้วยค่าเริ่มต้นดังต่อไปนี้:
ตัวอย่าง
ul {
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1 em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}