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…