list-style-position
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Thuộc tính CSS list-style-position đặt vị trí của ::marker so với mục danh sách.
Try it
list-style-position: inside;
list-style-position: outside;
<section class="default-example" id="default-example">
<div>
<p>NASA Notable Missions</p>
<ul class="transition-all" id="example-element">
<li>Apollo 11: First Human Landing</li>
<li>City in Space: The International Space Station</li>
<li>Great Observatory: The Hubble Space Telescope</li>
<li>Everlasting Mars Rovers</li>
</ul>
</div>
</section>
.default-example {
font-size: 1.2rem;
}
#example-element {
width: 100%;
background: #be094b;
color: white;
}
section {
text-align: left;
flex-direction: column;
}
hr {
width: 50%;
color: lightgray;
margin: 0.5em;
}
.note {
font-size: 0.8rem;
}
.note a {
color: #009e5f;
}
@counter-style space-counter {
symbols: "\1F680" "\1F6F8" "\1F6F0" "\1F52D";
suffix: " ";
}
Cú pháp
/* Giá trị từ khóa */
list-style-position: inside;
list-style-position: outside;
/* Giá trị toàn cục */
list-style-position: inherit;
list-style-position: initial;
list-style-position: revert;
list-style-position: revert-layer;
list-style-position: unset;
Thuộc tính list-style-position được chỉ định là một trong các giá trị từ khóa được liệt kê bên dưới.
Giá trị
inside-
::markerlà phần tử đầu tiên trong nội dung của mục danh sách. outside-
::markernằm ngoài hộp khối chính. Đây là giá trị mặc định củalist-style.
Mô tả
Thuộc tính này được áp dụng cho các mục danh sách, tức là các phần tử có display: list-item;<li>. Vì thuộc tính này được kế thừa, nó có thể được đặt trên phần tử cha (thường là <ol> hoặc <ul>) để áp dụng cho tất cả các mục danh sách.
Nếu một phần tử khối là con đầu tiên của phần tử danh sách được khai báo là list-style-position: inside, thì phần tử khối đó được đặt trên dòng sau hộp dấu đầu dòng.
Thường tiện hơn khi sử dụng thuộc tính rút gọn list-style.
Định nghĩa chính thức
| Initial value | outside |
|---|---|
| Applies to | list items |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |
Cú pháp chính thức
list-style-position =
inside |
outside
Ví dụ
Đặt vị trí mục danh sách
HTML
<p>List 1</p>
<ul class="inside">
<li>List Item 1-1</li>
<li>List Item 1-2</li>
<li>List Item 1-3</li>
<li>List Item 1-4</li>
</ul>
<p>List 2</p>
<ul class="outside">
<li>List Item 2-1</li>
<li>List Item 2-2</li>
<li>List Item 2-3</li>
<li>List Item 2-4</li>
</ul>
<p>List 3</p>
<ul class="inside-img">
<li>List Item 3-1</li>
<li>List Item 3-2</li>
<li>List Item 3-3</li>
<li>List Item 3-4</li>
</ul>
CSS
.inside {
list-style-position: inside;
list-style-type: square;
}
.outside {
list-style-position: outside;
list-style-type: circle;
}
.inside-img {
list-style-position: inside;
list-style-image: url("star-solid.gif");
}
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| CSS Lists and Counters Module Level 3 # list-style-position-property |
Tương thích trình duyệt
Xem thêm
- Thuộc tính rút gọn
list-style - Thuộc tính
list-style-type - Thuộc tính
list-style-image - Phần tử giả
::marker - Mô-đun CSS lists and counters
- Mô-đun CSS counter styles