การเปลี่ยนตำแหน่งเครื่องหมายรายการใน CSS

คุณสมบัติ list-style-position ใน CSS ใช้สำหรับตั้งค่าตำแหน่งเครื่องหมายของรายการ ค่าเริ่มต้นคือ outside ซึ่งตั้งค่าเครื่องหมายไว้นอกรายการ

ไวยากรณ์

ไวยากรณ์ของคุณสมบัติ CSS list-style-position ดังนี้:

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

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงคุณสมบัติ CSS list-style-property:

<!DOCTYPE html> <html> <head> <style> li {    width: 50%;    margin: 5px;    font-size: 120%;    box-shadow: 0 0 3px 1px black;    background: url("https://www.tutorialspoint.com/dbms/images/dbms.jpg") no-repeat 32px 8px;    list-style-position: inside;    padding: 0 0 10px 20px; } ol ol li {    list-style: lower-roman;    list-style-position: outside; } </style> </head> <body> <ol> <li>สีดำ</li> <li> สีน้ำเงิน <ol> <li>สีเขียว</li> <li>สีแดง</li> </ol> </li> <li>สีเหลือง</li> <li>สีแดง</li> </ol> </body> </html>

ผลลัพธ์

ได้ผลลัพธ์ดังนี้:

ตัวอย่างเพิ่มเติม

<!DOCTYPE html> <html> <head> <style> ul {    width: 200px;    box-shadow: inset 0 0 6px green;    list-style-position: outside; } ul + ul {    list-style-type: circle;    list-style-position: inside; } </style> </head> <body> <ul> <li>demo</li> <li>demo</li> <li>demo</li> </ul> <ul> <li>demo</li> <li>demo</li> <li>demo</li> </ul> </body> </html>

ผลลัพธ์

ได้ผลลัพธ์ดังนี้: