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 2015年7月.
list-style-position 属性指定标记框在主体块框中的位置。
使用助记符list-style更方便。
语法
css
/* Keyword values */
list-style-position: inside;
list-style-position: outside;
/* Global values */
list-style-position: inherit;
list-style-position: initial;
list-style-position: unset;
数值
Formal syntax
list-style-position =
inside |
outside
例子
HTML
html
<ul class="one">
List 1
<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>
<ul class="two">
List 2
<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>
<ul class="three">
List 3
<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
css
.one {
list-style: square inside;
}
.two {
list-style-position: outside;
list-style-type: circle;
}
.three {
list-style-image: url("star-solid.gif");
list-style-position: inherit;
}
Result
Specifications
| Specification |
|---|
| CSS Lists and Counters Module Level 3 # list-style-position-property |
Browser compatibility
Loading…