MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

list-style-position

这篇翻译不完整。请帮忙从英语翻译这篇文章

The list-style-position property specifies the position of the marker box in the principal block box.

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

初始值outside
适用元素list items
是否是继承属性yes
适用媒体visual
计算值as specified
是否适用于 CSS 动画
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

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

Result

Specifications

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

Browser compatibility

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

文档标签和贡献者

 此页面的贡献者: SphinxKnight, ranwu
 最后编辑者: SphinxKnight,