การจัดรูปแบบ Unordered และ Ordered Lists ด้วย CSS

รูปแบบและตำแหน่งของ Unordered และ Ordered Lists สามารถจัดได้ด้วยคุณสมบัติ CSS: list-style-type, list-style-image, list-style-position (หรือ shorthand list-style)

ไวยากรณ์ (Syntax)

Selector {
  list-style: /*value*/;
}

ตัวอย่างที่ 1: จัดสไตล์ Ordered List

<!DOCTYPE html>
<html>
<head>
  <style>
    ol { list-style: upper-roman; line-height: 150%; }
  </style>
</head>
<body>
  <h2>Latest C# Versions</h2>
  <ol>
    <li>C# 8.0</li> <li>C# 7.3</li> <li>C# 7.2</li>
    <li>C# 7.1</li> <li>C# 7.0</li>
  </ol>
</body>
</html>

ผลลัพธ์

การจัดรูปแบบ Unordered และ Ordered Lists ด้วย CSS

ตัวอย่างที่ 2: จัดสไตล์ Unordered List แบบซ้อน

<!DOCTYPE html>
<html>
<head>
  <style>
    ul > ul { list-style: circle inside; }
    li:last-child { list-style-type: square; }
  </style>
</head>
<body>
  <h2>Programming Languages</h2>
  <ul>
    <li>C++ programming language created by Bjarne Stroustrup...</li>
    <li>Java programming language developed by James Gosling.</li>
    <ul>
      <li>Core Java</li> <li>Advanced Java</li>
    </ul>
    <li>Scala is a modern multi-paradigm programming language...</li>
  </ul>
</body>
</html>

ผลลัพธ์

การจัดรูปแบบ Unordered และ Ordered Lists ด้วย CSS

ค่าของ list-style-type ที่นิยม

ประเภท	ค่า	ตัวอย่าง
Unordered	`disc`	● (default)
	`circle`	○
	`square`	■
	`none`	ไม่มี bullet
	`custom`	`list-style-image: url(...)`
	`::marker`	ปรับสี/ขนาด bullet (modern)
Ordered	`decimal`	1, 2, 3...
	`decimal-leading-zero`	01, 02, 03...
	`lower-alpha`	a, b, c...
	`upper-alpha`	A, B, C...
	`lower-roman`	i, ii, iii...
	`upper-roman`	I, II, III...
	`lower-greek`	α, β, γ...
	`cjk-decimal`	一, 二, 三...

list-style-position

outside (default) - bullet อยู่ข้างนอก content box
inside - bullet อยู่ภายใน content box (รวมใน text flow)

Modern Approach: ::marker Pseudo-element

li::marker {
  color: #dc3545;
  font-size: 1.2em;
  content: "► ";  /* เปลี่ยน bullet symbol */
}