CSS - 列表样式位置

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

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

对于列表项，使用list-style 简写 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 属性的示例，带有和不带附加图像，显示当位置为inside时项目符号的位置。

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

以下是一个list-style-position CSS 属性的示例，带有和不带附加图像，显示当位置为outside时项目符号的位置。

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

打印页面