Thay đổi vị trí Marker danh sách bằng CSS

Thuộc tính list-style-position dùng để thiết lập vị trí của marker danh sách.

Ví dụ: outside vs inside

<!DOCTYPE html>
<html>
<head>
<style>
ul.demo1 { list-style-position: outside; }
ul.demo2 { list-style-position: inside; }
</style>
</head>
<body>
<h1>Các đội</h1>
<h2>Đội ODI</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>Đội Test</h2>
<ul class="demo2">
  <li>India</li><li>Australia</li><li>England</li>
  <li>West Indies</li><li>South Africa</li><li>Srilanka</li>
</ul>
</body>
</html>

Kết quả

Giải thích:

• outside (mặc định): Marker nằm ngoài khung nội dung, căn lề trái đồng đều
• inside: Marker nằm trong khung nội dung, đẩy nội dung lùi vào
• Khi dùng inside, marker trở thành một phần của dòng đầu tiên
• Shorthand: list-style: square inside;