list-style-position - CSS（层叠样式表） 编辑

 list-style-position 属性指定标记框在主体块框中的位置。

使用助记符list-style更方便。

初始值	outside
适用元素	list items
是否是继承属性	yes
计算值	as specified
Animation type	discrete

语法

/* Keyword values */
list-style-position: inside;
list-style-position: outside;

/* Global values */
list-style-position: inherit;
list-style-position: initial;
list-style-position: unset;

数值

outside

标记盒在主块盒的外面。

inside

标记盒是主要块盒中的第一个行内盒，处于元素的内容流之后。

Formal syntax

inside | outside

例子

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

.one {
  list-style:square inside;
}

.two {
  list-style-position: outside;
  list-style-type: circle;
}

.three {
  list-style-image: url("https://www.wenjiangs.com/wp-content/uploads/2020/mozilla/starsolid.gif");
  list-style-position: inherit;
}

Result

Specifications

Specification	Status	Comment
CSS Lists Module Level 3 list-style-position	Working Draft	No change.
CSS Level 2 (Revision 1) list-style-position	Recommendation	Initial definition.

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

• Desktop
• Mobile

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	1.0	1.0 (1.0)	4.0	3.5	1.0 (85)

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	?	?	?	?	?

N.B. There is variance among browsers regarding behaviour when a block element is placed first within a list element declared as list-style-position:inside. Chrome and Safari both place this element on the same line as the marker box, whereas Firefox, Internet Explorer and Opera place it on the next line. For more information on this, see this Mozilla Bug report and an example.

See also

• list-style, list-style-type, list-style-image