一致的列表缩进 - 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 上查看此页面 • 报告此内容的问题