一致的列表縮排 - CSS | MDN

建立列表

獨立列表項

首先，我們考慮純列表項，不巢狀在項列表中。當使用 HTML <li> 元素時，瀏覽器會將 display 值設定為 list-item。未巢狀在列表中的列表項是否提供標記（也稱為“專案符號”）取決於瀏覽器。我們可以使用 list-style-type: none 刪除該專案符號。

css

li {
  border: 1px dashed red;
}
li:nth-of-type(n + 4) {
  list-style-type: none;
}

li {
  width: 15em;
}

<p>Default bullets depend on the browser:</p>
<li>A list item</li>
<li>A list item</li>
<li>A list item</li>
<p>These list items have their bullets removed:</p>
<li>A list item</li>
<li>A list item</li>
<li>A list item</li>

虛線紅色邊框代表每個列表項內容區域的外邊緣。此時，列表項沒有內邊距或邊框。

巢狀列表項

現在我們將這些包裝在一個父元素中；在這種情況下，我們將它們包裝在一個無序列表（即 <ul>）中。根據 CSS 盒模型，列表項的盒子必須顯示在父元素的內容區域內。

css

ul {
  border: 1px dashed blue;
}
li {
  border: 1px dashed red;
  list-style-type: none;
}

body {
  width: 15em;
}

<ul>
  <li>A list item</li>
  <li>A list item</li>
  <li>A list item</li>
</ul>

虛線藍色邊框顯示了 <ul> 元素內容區域的邊緣。該父元素帶有外邊距和內邊距。瀏覽器為無序列表設定以下預設樣式

css

ul {
  /* user-agent styles */
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  padding-inline-start: 40px;
}

預設專案符號位置

現在我們把列表項標記放回去。由於這是一個無序列表，列表項從其 <ul> 父元素繼承了 list-style-type: disc; 瀏覽器樣式，即實心圓“專案符號”。

css

li {
  border: 1px dashed red;
}
ul {
  border: 1px dotted blue;
}
ul:last-of-type {
  list-style-position: inside;
}

ul {
  width: 15em;
}

<p>These default to <code>list-style-position: outside</code>.</p>
<ul>
  <li>A list item</li>
  <li>A list item</li>
  <li>A list item</li>
</ul>
<p>These have <code>list-style-position: inside</code> set.</p>
<ul>
  <li>A list item</li>
  <li>A list item</li>
  <li>A list item</li>
</ul>

從視覺上看，標記在 <ul> 的內容區域之外，但這並不是這裡的重點。關鍵是標記放置在 <li> 元素的“主框”之外，而不是 <ul>。它們有點像列表項的附件，懸掛在 <li> 的內容區域之外，但仍然附加到 <li>。

這就是為什麼在所有現代瀏覽器中，當 list-style-position 的值預設為或顯式設定為 outside 時，標記都放置在為 <li> 元素設定的任何邊框之外。當我們將其更改為 inside 時，標記被帶到 <li> 的內容內部，就好像它們是一個內聯框放置在 <li> 的最開頭一樣。

預設縮排

如上所述，所有瀏覽器都為 <ul> 父元素提供外邊距和內邊距。雖然使用者代理 CSS 有所不同，但它們都包括

css

ul,
ol {
  /* user-agent styles */
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  padding-inline-start: 40px;
}
ol {
  list-style-type: decimal;
}
li {
  display: list-item;
  text-align: match-parent;
}
::marker {
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  text-transform: none;
}

所有瀏覽器預設將 <ul> 元素的 padding-inline-start 設定為 40 畫素。在從左到右的語言中，如英語，這是左側內邊距。作者樣式表（即您的樣式表）中設定的任何內邊距都優先。

如果您想明確，請在樣式表中設定以下內容，以確保（除非另有覆蓋）文件主內容區域中包含在 <main> 部分中的列表項正確縮排

css

:where(main ol, main ul) {
  margin-inline-start: 0;
  padding-inline-start: 40px;
}

並且始終將您的 <li> 元素巢狀在 <ul> 或 <ol> 中。

幫助改進 MDN

瞭解如何貢獻

此頁面最後由 MDN 貢獻者於 2025 年 7 月 14 日修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題