วิธีสไตล์ Ordered List ให้เป็นตัวเลขโรมันเล็กด้วย CSS

เรียนรู้สไตล์ ordered list ให้เป็นตัวเลขโรมันเล็ก (lowercase roman) ด้วย CSS

ทำ ordered list ใน HTML 用:

• <ol> tag กำหนด ordered list element
• <li> tag กำหนด list item elements

ตัวอย่าง:

<ol> <li>List item</li> <li>List item</li> <li>List item</li> </ol>

Default ordered list ใช้ regular decimal numbers:

1. List item
2. List item
3. List item

Default decimal numbers มาจาก User-Agent Stylesheet (UAS) built-in ในเบราว์เซอร์ทุกตัว CSS property: list-style-type: decimal;

วิธีเพิ่ม Lowercase Roman Numbers ด้วย CSS

สร้าง list lowercase roman numbers override default decimal style ด้วย list-style-type:

ol { list-style-type: lower-roman; }

Lowercase roman numbers example:

1. List item
2. List item
3. List item