การเปลี่ยนตำแหน่งตัวหมายเลขรายการด้วย CSS (list-style-position)

คุณสมบัติ list-style-position ใช้สำหรับกำหนดตำแหน่งของตัวหมายเลขรายการ (list-item markers)

ตัวอย่าง: outside vs inside

<!DOCTYPE html> <html> <head> <style> ul.demo1 {    list-style-position: outside; } ul.demo2 {    list-style-position: inside; } </style> </head> <body> <h1>Teams</h1> <h2>ODI Teams</h2> <ul class="demo1"> <li>India</li> <li>Australia</li> <li>England</li> <li>West Indies</li> <li>South Africa</li> <li>Srilanka</li> </ul> <h2>Test Teams</h2> <ul class="demo2"> <ul> <li>India</li> <li>Australia</li> <li>England</li> <li>West Indies</li> <li>South Africa</li> <li>Srilanka</li> </ul> </ul> </body> </html>

ผลลัพธ์

คำอธิบายค่า

• outside - ตัวหมายเลขอยู่นอกกล่องเนื้อหา (ค่าเริ่มต้น) ข้อความจัดชิดซ้ายตรงกัน
• inside - ตัวหมายเลขอยู่ในกล่องเนื้อหา ข้อความจะถูกดันไปข้างใน
• initial - คืนค่าเริ่มต้น (outside)
• inherit - สืบทอดจากพ่อ

ความแตกต่างที่มองเห็นได้ชัด

outside (ค่าเริ่มต้น):          inside:
● Item 1                        ● Item 1
● Item 2                        ● Item 2
● Long item text                ● Long item text
  wraps here                      wraps under marker

ข้อความจัดตรงกันทั้งหมด          ข้อความดันไปข้างใน

Shorthand: list-style

list-style: type position image;
/* ตัวอย่าง */
list-style: disc outside none;      /* ค่าเริ่มต้น ul */
list-style: decimal inside none;    /* ol ตำแหน่งใน */
list-style: square outside url();   /* ใช้ภาพ marker */

แนะนำ: ใช้ outside สำหรับรายการอ่านยาว (อ่านง่าย) ใช้ inside สำหรับรายการสั้นในกล่องจำกัดความกว้าง