CSS 属性

list-style-position CSS 属性在设置列表项标记的位置时很有用。

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

使用列表样式简写 CSS 会更方便列表项的属性。

属性值

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

  • inside:标记放置在列表内部，即列表项内容第一行的开头。

  • outside:标记放置在包含列表项内容的主框外部。

适用范围

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

DOM 语法

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

CSS list-style-position: inside

下面是 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('/css/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: outside

以下是 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('/css/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>