Thuộc tính list-style-position trong CSS được dùng để đặt vị trí dấu hiệu của các mục danh sách. Giá trị mặc định là outside, đặt dấu hiệu bên ngoài mục danh sách.
Cú pháp
Cú pháp của thuộc tính CSS list-style-position như sau:
Selector { list-style-position: /*giá trị*/ }
Ví dụ
Các ví dụ sau minh họa thuộc tính CSS list-style-position:
<!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>Đen</li> <li> Xanh dương <ol> <li>Xanh lá</li> <li>Đỏ</li> </ol> </li> <li>Vàng</li> <li>Đỏ</li> </ol> </body> </html>
Kết quả
Đoạn mã trên cho kết quả sau:
Ví dụ khác
<!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>
Kết quả
Đoạn mã trên cho kết quả sau:
