CSS list-style-position 属性用于指定标记符号或标记图像相对于列表项的位置。
通过list-style-position
属性可以将列表标记符号放置在列表内容的外面,或放置在列表内容的里面。如下图所示:
list-style-position
属性可以应用在列表项或通过display: list-item设置为列表的元素上。属性值outside
会将标记放在离列表项边框边界一定距离处,这距离在CSS 中未定义。属性值inside
会将标记插入在列表项内容最前面,行为类似行内元素一样。
官方语法
list-style-position: inside | outside | inherit
参数:
- outside:列表标记默认的位置。标记放在离列表项边框边界一定距离处。
- inside:标记插入在列表项内容最前面。它在任何内容元素和
:before
伪元素之前。 - inherit:继承父元素的标记位置值。
应用范围
list-style-position
属性可以应用在列表元素或display: list-item
的元素上。
示例代码
list-style-position: inside; list-style-position: outside; list-style-position: inherit;
使用图像标记的示例代码:
ul { list-style-image: url(images/arrow.png); list-style-position: inside; }
在线演示
下面的例子演示了list-style-position
属性的两种取值的效果:
list-style-position: inside;
- 列表项一
- 列表项二
- 列表项三
list-style-position: outside;
- 列表项一
- 列表项二
- 列表项三
浏览器支持
所有的现代浏览器都支持list-style-position
属性,包括Chrome, Firefox, Safari, Opera, Internet Explorer 以及 Android 和 iOS。