home

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

การจัดรูปแบบรายการลำดับและไม่มีลำดับด้วย CSS

เพื่อจัดรูปแบบทั้งรายการไม่มีลำดับ (ul) และมีลำดับ (ol) ให้ใช้คุณสมบัติ list-style-type, list-style-image, และ list-style-position

ตัวอย่างที่ 1: จัดรูปแบบ ul ด้วย square

<!DOCTYPE html> <html> <head> <style> ul {    list-style-type: square; } </style> </head> <body> <h2>Teams</h2> <ul> <li>India</li> <li>Australia</li> <li>England</li> <li>West Indies</li> <li>South Africa</li> <li>Srilanka</li> </ul> </body> </html>

ผลลัพธ์

การจัดรูปแบบรายการลำดับและไม่มีลำดับด้วย CSS

ตัวอย่างที่ 2: จัดรูปแบบ ol ด้วย upper-roman

<!DOCTYPE html> <html> <head> <style> ol {    list-style-type: upper-roman; } </style> </head> <body> <h2>Teams</h2> <ol> <li>India</li> <li>Australia</li> <li>England</li> <li>West Indies</li> <li>South Africa</li> <li>Srilanka</li> </ol> </body> </html>

ผลลัพธ์

การจัดรูปแบบรายการลำดับและไม่มีลำดับด้วย CSS

ตัวอย่างที่ 3: ใช้ภาพเป็นตัวหมายเลขสำหรับทั้ง ul และ ol

<!DOCTYPE html> <html> <head> <style> ul.demo1 {    list-style-image: url('https://www.tutorialspoint.com/images/Swift.png'); } ol.demo2 {    list-style-image: url('https://www.tutorialspoint.com/images/Swift.png'); } </style> </head> <body> <h2>Teams</h2> <ul class="demo1"> <li>India - Qualified for WordCup</li> <li>Australia - Qualified for WordCup</li> <li>England - Qualified for WordCup</li> </ul> <h2>Players</h2> <ol class="demo2"> <li>Virat Kohli</li> <li>David Warner</li> <li>Steve Smith</li> </ol> </body> </html>

ผลลัพธ์

การจัดรูปแบบรายการลำดับและไม่มีลำดับด้วย CSS

คำแนะนำเพิ่มเติม

  • ใช้ list-style: none เพื่อซ่อนตัวหมายเลข (มักใช้กับ navigation menu)
  • ใช้ ::marker pseudo-element เพื่อจัดสไตล์ตัวหมายเลขแยกต่างหาก (CSS3)
  • ภาพควรมีขนาดเล็ก (16x16px หรือ 24x24px) และเป็น PNG/SVG โปร่งใส
  • สำหรับ RTL (ภาษาอาหรับ/ฮิบรู) ตำแหน่ง marker จะกลับด้านอัตโนมัติ

ตัวอย่าง ::marker (สมัยใหม่)

ul li::marker {
  color: red;
  font-size: 1.2em;
  content: "→ "; /* เปลี่ยนสัญลักษณ์ */
}