一致的列表缩进

对列表进行的最常见的样式更改之一是更改缩进距离，即列表项向右推动的距离。本文将帮助您了解缩进列表项，以便列表项标记可见。

要了解为什么会这样，更重要的是如何完全避免此问题，需要检查列表构造的详细信息。

创建列表

独立列表项

首先，我们考虑纯列表项，而不是嵌套在列表项中。使用 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;
}

所有浏览器都将 padding-inline-start 的默认值为 40 像素，用于 <ul> 元素。在从左到右的语言（如英语）中，这是左侧的填充。作者样式表（即您的样式表）中设置的任何填充都优先。

如果您想明确说明，请在您的样式表中设置以下内容，以确保除非另有覆盖，否则文档主内容区域中的列表项（包含在 <main> 部分中）正确缩进

css

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

并且始终将您的 <li> 元素嵌套在 <ul> 或 <ol> 中。