CSS list-style-position 属性

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

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

实例

规定列表中列表项目标记的位置：

<html>
<head>
<style type="text/css">
ul.inside
{
list-style-position: inside
}
ul.outside
{
list-style-position: outside
}
</style>
</head>
<body>
<p>该列表的 list-style-position 的值是 "inside"：</p>
<ul class="inside">
<li>Earl Grey Tea - 一种黑颜色的茶</li>
<li>Jasmine Tea - 一种神奇的“全功能”茶</li>
<li>Honeybush Tea - 一种令人愉快的果味茶</li>
</ul>
<p>该列表的 list-style-position 的值是 "outside"：</p>
<ul class="outside">
<li>Earl Grey Tea - 一种黑颜色的茶</li>
<li>Jasmine Tea - 一种神奇的“全功能”茶</li>
<li>Honeybush Tea - 一种令人愉快的果味茶</li>
</ul>
</body>
</html>

运行一下

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

属性
list-style-position	1.0	4.0	1.0	1.0	3.5

定义和用法

list-style-position 属性设置在何处放置列表项标记。

说明

该属性用于声明列表标志相对于列表项内容的位置。外部 (outside) 标志会放在离列表项边框边界一定距离处，不过这距离在 CSS 中未定义。内部 (inside) 标志处理为好像它们是插入在列表项内容最前面的行内元素一样。

默认值：	outside
继承性：	yes
版本：	CSS1
JavaScript 语法：	object.style.listStylePosition="inside"

可能的值

值	描述
inside	列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside	默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
inherit	规定应该从父元素继承 list-style-position 属性的值。

CSS list-style-position 属性

实例

浏览器支持

定义和用法

说明

可能的值

相关页面

分类导航