CSS - list-style-position 属性

CSS list-style-position 属性可用于设置列表项的标记位置。

属性 list-style-position 应用于具有 display： list-item 的元素。默认情况下，诸如 <li> 之类的元素可以设置此属性。由于此属性可以被继承，因此一旦设置为父元素，它就会应用于其中的列表项。

对列表项使用列表样式的速记 CSS 属性更为方便。

可能的值

属性 list-style-position 可以具有以下关键字值之一：

inside：标记放置在列表内部，即位于列表项内容的第一行的开头。
outside：标记放置在包含列表项内容的主框之外。

适用于

列表项。<li> 和 <summary> 等元素，以及所有具有 display： list-item 的元素。

DOM 语法


object.style.listStylePosition = "inside | outside";

CSS list-style-position - 内部值

下面是一个 list-style-position CSS 属性的示例，无论是否附加了图像，当位置在里面时，显示了项目符号的位置：


<html>
<head>
<style>
	 	.type-position-inside {
	 	 	 list-style-position: inside;
	 	}
	 	
	 	.type-position-inside-image {
	 	 	 list-style-position: inside;
	 	 	 list-style-image: url('images/smiley.png');
	 	}

	 	li {
	 	 	 border: 2px solid red;
	 	 	 width: 300px;
	 	}
	 	</style>
</head>
<body>
	 	<h2>list-style-position</h2>
	 	 	 <ul class="type-position-inside"><u>List style position - inside</u>
	 	 	 	 	<li>First Item</li>
	 	 	 	 	<li>Second Item</li>
	 	 	 	 	<li>Third Item</li>
	 	 	 </ul>
	 	
	 	 	 <ul class="type-position-inside-image"><u>List style position - inside</u>
	 	 	 	 	<li>First Item</li>
	 	 	 	 	<li>Second Item</li>
	 	 	 	 	<li>Third Item</li>
	 	 	 </ul>
</body>
</html>

CSS list-style-position - 外部值

下面是一个 list-style-position CSS 属性的示例，无论是否附加了图像，当位置在外面时，显示了项目符号的位置：


<html>
<head>
<style>
	 	.type-position-outside {
	 	 	 list-style-position: outside;
	 	}

	 	.type-position-outside-image {
	 	 	 list-style-position: outside;
	 	 	 list-style-image: url('images/smiley.png');
	 	}

	 	li {
	 	 	 border: 2px solid red;
	 	 	 width: 300px;
	 	}
	 	</style>
</head>
<body>
	 	<h2>list-style-position</h2>
	 	 	 <ul class="type-position-outside"><u>List style position - outside</u>
	 	 	 	 	<li>First Item</li>
	 	 	 	 	<li>Second Item</li>
	 	 	 	 	<li>Third Item</li>
	 	 	 </ul>

	 	 	 <ul class="type-position-outside-image"><u>List style position - outside</u>
	 	 	 	 	<li>First Item</li>
	 	 	 	 	<li>Second Item</li>
	 	 	 	 	<li>Third Item</li>
	 	 	 </ul>
</body>
</html>

打印本页