目录

list-style-position

list-style-position属性指示如何相对于对象的内容绘制列表项标记。

 

语法

ul{list-style-position:inside |outside ;} 

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

例子

HTML

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

CSS

ul.inside 
{
	list-style-position: inside
}

ul.outside 
{
	list-style-position: outside
}

执行结果

该列表的 list-style-position 的值是 "inside":

该列表的 list-style-position 的值是 "outside":

参考

相关页面

外部链接