4. Thuộc tính list-style-position

Thuộc tính list-style-position quy định kiểu đánh dấu được hiển thị bên ngoài hay bên trong nội dung của phần tử tương ứng với 2 giá trị inside và outside (mặc định).
Chúng ta cùng xét ví dụ sau:
Code HTML

Hiển thị với giá trị inside
<ul class="a">
	<li>Phần tử 1</li>
	<li>Phần tử 2</li>
	<li>Phần tử 3</li>
</ul>
Hiển thị với giá trị outside
<ul class="b">
	<li>Phần tử 1</li>
	<li>Phần tử 2</li>
	<li>Phần tử 3</li>
</ul>

Để thấy rõ hơn về inside và outside mình sẽ quy định border cho các phần tử trong danh sách, và sử dụng ảnh nền làm kiểu đánh dấu.

/* Hiển thị với ảnh nền */
ul.a, ul.b {list-style-image: url(icon.gif)}
/* Tạo border các các phần tử <li> */
ul.a li, ul.b li{ border: 1px solid #cfcfcf; margin-top: 7px; width: 150px }
/* Danh sách thứ nhất hiển thị với giá trị inside */
ul.a {list-style-position: inside}
/* Danh sách thứ 2 hiển thị với giá trị outside*/
ul.b {list-style-position: outsite}

Kết quả:

CSS List style position