รายการ HTML Unordered
แท็ก HTML <ul>กำหนดรายการที่ไม่เรียงลำดับ (สัญลักษณ์แสดงหัวข้อย่อย)
รายการ HTML ที่ไม่เรียงลำดับ
รายการที่ไม่เรียงลำดับเริ่มต้นด้วย<ul>แท็ก แต่ละรายการเริ่มต้นด้วย
<li>แท็ก
รายการจะถูกทำเครื่องหมายด้วยสัญลักษณ์แสดงหัวข้อย่อย (วงกลมสีดำขนาดเล็ก) โดยค่าเริ่มต้น:
ตัวอย่าง
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
รายการ HTML ที่ไม่เรียงลำดับ - เลือกตัวทำเครื่องหมายรายการ
คุณสมบัติ CSS list-style-typeใช้เพื่อกำหนดรูปแบบของตัวทำเครื่องหมายรายการ สามารถมีค่าใดค่าหนึ่งต่อไปนี้:
| Value | Description |
|---|---|
| disc | Sets the list item marker to a bullet (default) |
| circle | Sets the list item marker to a circle |
| square | Sets the list item marker to a square |
| none | The list items will not be marked |
ตัวอย่าง - ดิสก์
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
ตัวอย่าง - วงกลม
<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
ตัวอย่าง - Square
<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
ตัวอย่าง - ไม่มี
<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
รายการ HTML ที่ซ้อนกัน
รายการสามารถซ้อนกันได้ (รายการภายในรายการ):
ตัวอย่าง
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
หมายเหตุ:รายการ ( <li>) สามารถมีรายการใหม่และองค์ประกอบ HTML อื่นๆ เช่น รูปภาพและลิงก์ เป็นต้น
รายการแนวนอนด้วย CSS
รายการ HTML สามารถจัดรูปแบบได้หลายวิธีด้วย CSS
วิธีหนึ่งที่ได้รับความนิยมคือการจัดรูปแบบรายการในแนวนอน เพื่อสร้างเมนูนำทาง:
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
เคล็ดลับ:คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับ CSS ได้ใน บทช่วย สอน CSSของ เรา
สรุปบท
- ใช้องค์ประกอบ HTML
<ul>เพื่อกำหนดรายการที่ไม่เรียงลำดับ - ใช้คุณสมบัติ CSS
list-style-typeเพื่อกำหนดตัวทำเครื่องหมายรายการ - ใช้องค์ประกอบ HTML
<li>เพื่อกำหนดรายการ - รายการสามารถซ้อนกันได้
- รายการสามารถมีองค์ประกอบ HTML อื่น ๆ ได้
- ใช้คุณสมบัติ CSS
float:leftเพื่อแสดงรายการในแนวนอน
แท็กรายการ HTML
| Tag | Description |
|---|---|
| <ul> | Defines an unordered list |
| <ol> | Defines an ordered list |
| <li> | Defines a list item |
| <dl> | Defines a description list |
| <dt> | Defines a term in a description list |
| <dd> | Describes the term in a description list |
สำหรับรายการแท็ก HTML ทั้งหมดที่มีอยู่ โปรดไปที่การอ้างอิงแท็ก HTMLของ เรา