--- title: list-style-position slug: Web/CSS/list-style-position translation_of: Web/CSS/list-style-position ---
{{CSSRef}}

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

使用助记符{{cssxref("list-style")}}更方便。

{{cssinfo}}

语法

/* 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

{{csssyntax}}

例子

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;
}

Result

{{EmbedLiveSample("例子","200","420")}}

Specifications

Specification Status Comment
{{SpecName('CSS3 Lists', '#list-style-position-property', 'list-style-position')}} {{Spec2('CSS3 Lists')}} No change.
{{SpecName('CSS2.1', 'generate.html#propdef-list-style-position', 'list-style-position')}} {{Spec2('CSS2.1')}} Initial definition.

Browser compatibility

{{Compat("css.properties.list-style-position")}}

See also