CSS参考手册
列表和计数器 | Lists & Counters
列表样式位置 | 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
标记框是主体块框中的第一个内联框,之后是元素的内容。
形式语法
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) |
? |
? |
? |
? |
列表和计数器 | Lists & Counters相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。