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>

列印頁面