home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

วิธีสร้างรายการไม่มีลำดับ (Unordered List) Bullet รูปวงกลมใน HTML

ใช้ CSS property list-style-type: circle ในแท็ก <ul> เพื่อเปลี่ยน bullet เริ่มต้นเป็นรูปวงกลมว่าง

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
  <title>HTML Unordered List</title>
</head>
<body>
  <h1>Developed Countries</h1>
  <p>The list of developed countries:</p>
  <ul style="list-style-type:circle">
    <li>US</li>
    <li>Australia</li>
    <li>New Zealand</li>
  </ul>
</body>
</html>

ผลลัพธ์

  • US
  • Australia
  • New Zealand

ค่าของ list-style-type ทั้งหมด

ค่ารูปแบบ Bullet
disc● วงกลมเต็ม (ค่าเริ่มต้น)
circle○ วงกลมว่าง
square■ สี่เหลี่ยมเต็ม
noneไม่มี bullet

แนวทางปฏิบัติที่ดี

ใช้ class ใน CSS file แทน inline style:

.circle-bullets {
  list-style-type: circle;
}