列表样式位置 | list-style-position

list-style-position

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

使用list-style速记往往更方便。

/* 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
应用于	list items
是否继承	yes
适用媒体	visual
计算值	as specified
Animation type	discrete
规范顺序	the unique non-ambiguous order defined by the formal grammar

注意：这个属性应用于列表项目，即元素display: list-item; 默认情况下包含<li>元素。由于此属性是继承的，因此可以在父元素上设置（通常<ol>或<ul>）以使其适用于所有列表项。

注意：当一个块元素被放置在声明为的列表元素的第一个内时，浏览器之间的行为是有差异的list-style-position: inside。Chrome和Safari都将这个元素放置在标记框的同一行，而Firefox，Internet Explorer和Opera将它放在下一行。有关更多信息，请参阅错误36854。

句法

价值

outside标记框位于主体块框外部。

形式语法

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://mdn.mozillademos.org/files/11979/starsolid.gif"
  list-style-position: inherit;
}

结果

规格

Specification	Status	Comment
CSS Lists and Counters Module Level 3The definition of 'list-style-position' in that specification.	Working Draft	No change.
CSS Level 2 (Revision 1)The definition of 'list-style-position' in that specification.	Recommendation	Initial definition.

浏览器兼容性

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

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