列表样式

列表在很大程度上与其他文本一样，但有一些特定的 CSS 属性需要您了解，以及一些需要考虑的最佳实践。本文将对此进行解释。

预备知识	使用 HTML 构建内容和 CSS 样式基础。
学习成果	设置列表项的间距，例如使用 margin 或 line-height。使用 `list-style` 属性。

一个简单的列表示例

首先，让我们看一个简单的列表示例。在本文中，我们将研究无序列表、有序列表和描述列表——所有这些列表都具有相似的样式特性，也有一些是它们特有的。未样式化的示例可在 GitHub 上获取（也请查看源代码）。

我们的列表示例的 HTML 代码如下所示

html

<h2>Shopping (unordered) list</h2>

<p>
  Paragraph for reference, paragraph for reference, paragraph for reference,
  paragraph for reference, paragraph for reference, paragraph for reference.
</p>

<ul>
  <li>Hummus</li>
  <li>Pita</li>
  <li>Green salad</li>
  <li>Halloumi</li>
</ul>

<h2>Recipe (ordered) list</h2>

<p>
  Paragraph for reference, paragraph for reference, paragraph for reference,
  paragraph for reference, paragraph for reference, paragraph for reference.
</p>

<ol>
  <li>Toast pita, leave to cool, then slice down the edge.</li>
  <li>
    Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
  </li>
  <li>Wash and chop the salad.</li>
  <li>Fill pita with salad, hummus, and fried halloumi.</li>
</ol>

<h2>Ingredient description list</h2>

<p>
  Paragraph for reference, paragraph for reference, paragraph for reference,
  paragraph for reference, paragraph for reference, paragraph for reference.
</p>

<dl>
  <dt>Hummus</dt>
  <dd>
    A thick dip/sauce generally made from chick peas blended with tahini, lemon
    juice, salt, garlic, and other ingredients.
  </dd>
  <dt>Pita</dt>
  <dd>A soft, slightly leavened flatbread.</dd>
  <dt>Halloumi</dt>
  <dd>
    A semi-hard, unripened, brined cheese with a higher-than-usual melting
    point, usually made from goat/sheep milk.
  </dd>
  <dt>Green salad</dt>
  <dd>That green healthy stuff that many of us just use to garnish kebabs.</dd>
</dl>

如果您现在访问实时示例并使用浏览器开发者工具检查列表元素，您会注意到一些默认样式

<ul> 和 <ol> 元素具有 16px (1em) 的顶部和底部margin 以及 40px (2.5em) 的padding-left。如果 ul 和 ol 元素的方向属性 dir 设置为从右到左 (rtl)，则 padding-right 会生效，其默认值为 40px (2.5em)。
列表项 (<li> 元素) 没有设置默认间距。
<dl> 元素具有 16px (1em) 的顶部和底部margin，但没有设置内边距。
<dd> 元素具有 40px (2.5em) 的margin-left。
我们为了参考而包含的<p> 元素具有 16px (1em) 的顶部和底部margin——与不同列表类型相同。

处理列表间距

在设置列表样式时，您需要调整它们的样式，使其与周围元素（例如段落和图像；有时称为垂直节奏）保持相同的垂直间距，并彼此保持相同的水平间距（您可以在 GitHub 上看到完成的样式示例，并找到源代码）。

用于文本样式和间距的 CSS 如下所示

css

/* General styles */

html {
  font-family: "Helvetica", "Arial", sans-serif;
  font-size: 10px;
}

h2 {
  font-size: 2rem;
}

ul,
ol,
dl,
p {
  font-size: 1.5rem;
}

li,
p {
  line-height: 1.5;
}

/* Description list styles */

dd,
dt {
  line-height: 1.5;
}

dt {
  font-weight: bold;
}

第一条规则设置了全站字体和 10px 的基线字体大小。这些将被页面上的所有内容继承。
规则 2 和 3 设置了标题、不同列表类型（列表元素的子元素会继承这些）和段落的相对字体大小。这意味着每个段落和列表将具有相同的字体大小以及顶部和底部间距，有助于保持垂直节奏的一致性。
规则 4 为段落和列表项设置了相同的line-height——因此段落和每个单独的列表项将具有相同的行间距。这也有助于保持垂直节奏的一致性。
规则 5 和 6 适用于描述列表。我们为描述列表的术语和描述设置了与段落和列表项相同的 line-height。再次强调，一致性是好的！我们还使描述术语具有粗体字体，以便它们在视觉上更容易突出。

列表特有样式

现在我们已经研究了列表的通用间距技术，接下来让我们探讨一些列表特有的属性。您应该首先了解三个属性，它们可以在 <ul> 或 <ol> 元素上设置

list-style-type：设置列表使用的项目符号类型，例如，无序列表的方形或圆形项目符号，或有序列表的数字、字母或罗马数字。
list-style-position：设置每个项目开头的项目符号是显示在列表内部还是外部。
list-style-image：允许您为项目符号使用自定义图像，而不是简单的方形或圆形。

项目符号样式

如上所述，list-style-type 属性允许您设置项目符号点的类型。在我们的示例中，我们已将有序列表设置为使用大写罗马数字，代码如下

css

ol {
  list-style-type: upper-roman;
}

这给我们带来了以下外观

an ordered list with the bullet points set to appear outside the list item text.

您可以通过查看list-style-type参考页面找到更多选项。

项目符号位置

list-style-position 属性设置项目符号是显示在列表项内部还是在每个项目开始之前显示在列表项外部。默认值为 outside，这会使项目符号位于列表项之外，如上所示。

如果将值设置为 inside，则项目符号将位于行内

css

ol {
  list-style-type: upper-roman;
  list-style-position: inside;
}

an ordered list with the bullet points set to appear inside the list item text.

使用自定义项目符号图像

list-style-image 属性允许您为项目符号使用自定义图像。语法非常简单

css

ul {
  list-style-image: url("star.svg");
}

但是，此属性在控制项目符号的位置、大小等方面有一些限制。您最好使用background系列属性，您已在之前的背景和边框课程中学习过。

在我们的最终示例中，我们已将无序列表样式化如下（在您上面已经看到的基础上）

css

ul {
  padding-left: 2rem;
  list-style-type: none;
}

ul li {
  padding-left: 2rem;
  background-image: url("star.svg");
  background-position: 0 0;
  background-size: 1.6rem 1.6rem;
  background-repeat: no-repeat;
}

这里我们做了以下工作

将 <ul> 的 padding-left 从默认的 40px 降低到 20px，然后为列表项设置相同的量。这样做是为了使列表项整体上仍与有序列表项和描述列表描述对齐，但列表项有一些填充，供背景图像位于其中。如果我们不这样做，背景图像将与列表项文本重叠，这会看起来很混乱。
将 list-style-type 设置为 none，以便默认不显示项目符号。我们将使用 background 属性来处理项目符号。
在每个无序列表项中插入一个项目符号。相关属性如下
- background-image：这引用了您要用作项目符号的图像文件的路径。
- background-position：这定义了图像将出现在所选元素背景的哪个位置——在这种情况下，我们说 0 0，这意味着项目符号将出现在每个列表项的左上角。
- background-size：这设置了背景图像的大小。我们理想情况下希望项目符号与列表项大小相同（或略小或略大）。我们使用的是 1.6rem (16px) 的大小，这与我们为项目符号留出的 20px 填充非常吻合——16px 加上项目符号和列表项文本之间 4px 的空间效果很好。
- background-repeat：默认情况下，背景图像会重复，直到填满可用的背景空间。我们只想在每种情况下插入一个图像副本，因此我们将其设置为 no-repeat。

这给了我们以下结果：

an unordered list with the bullet points set as little star images

list-style 简写

上述三个属性都可以使用单个简写属性 list-style 来设置。例如，以下 CSS

css

ul {
  list-style-type: square;
  list-style-image: url("example.png");
  list-style-position: inside;
}

可以替换为

css

ul {
  list-style: square url("example.png") inside;
}

这些值可以按任意顺序排列，并且您可以使用其中一个、两个或所有三个（未包含的属性使用的默认值是 disc、none 和 outside）。如果同时指定了 type 和 image，则如果图像因某种原因无法加载，则类型将用作备用。

控制列表计数

有时您可能希望在有序列表上以不同的方式计数——例如，从非 1 的数字开始，或者向后计数，或者以大于 1 的步长计数。HTML 和 CSS 提供了一些工具来帮助您。

start

start 属性允许您从非 1 的数字开始列表计数。以下示例

html

<ol start="4">
  <li>Toast pita, leave to cool, then slice down the edge.</li>
  <li>
    Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
  </li>
  <li>Wash and chop the salad.</li>
  <li>Fill pita with salad, hummus, and fried halloumi.</li>
</ol>

将为您提供此输出

reversed

reversed 属性将使列表从大到小计数，而不是从小到大。以下示例

html

<ol start="4" reversed>
  <li>Toast pita, leave to cool, then slice down the edge.</li>
  <li>
    Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
  </li>
  <li>Wash and chop the salad.</li>
  <li>Fill pita with salad, hummus, and fried halloumi.</li>
</ol>

将为您提供此输出

注意：如果反向列表中的列表项数量多于 start 属性的值，则计数将继续到零，然后进入负值。

value

value 属性允许您将列表项设置为特定的数值。以下示例

html

<ol>
  <li value="2">Toast pita, leave to cool, then slice down the edge.</li>
  <li value="4">
    Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
  </li>
  <li value="6">Wash and chop the salad.</li>
  <li value="8">Fill pita with salad, hummus, and fried halloumi.</li>
</ol>

将为您提供此输出

注意：即使您使用的是非数字的list-style-type，您仍然需要在 value 属性中使用等效的数值。

嵌套列表样式

是时候完成另一项任务了。这次我们希望您运用上面学到的知识，尝试为嵌套列表设置样式。

单击下面代码块中的**“播放”**以在 MDN Playground 中编辑示例。
使用方形项目符号样式化无序列表。
为无序列表项和有序列表项设置 line-height 为其 font-size 的 1.5 倍。
将有序列表设置为小写字母项目符号。
随意玩弄列表示例，尝试各种项目符号类型、间距或您喜欢的任何其他内容。

如果您犯了错误，可以使用 MDN Playground 中的“重置”按钮清除您的工作。如果您真的卡住了，可以在示例输出下方查看解决方案。

html

<ul>
  <li>First, light the candle.</li>
  <li>Next, open the box.</li>
  <li>
    Finally, place the three magic items in the box, in this exact order, to
    complete the spell:
    <ol>
      <li>The book of spells</li>
      <li>The shiny rod</li>
      <li>The goblin statue</li>
    </ol>
  </li>
</ul>

css

点击此处显示解决方案

您完成的 CSS 应该看起来像这样

css

ul {
  list-style-type: square;
}

li {
  line-height: 1.5;
}

ol {
  list-style-type: lower-alpha;
}

总结

一旦您了解了一些相关的基本原则和特定属性，列表样式就相对容易掌握。在下一篇文章中，我们将继续介绍链接样式技术。

帮助改进 MDN

了解如何贡献

此页面最后由MDN 贡献者于2025 年 10 月 13 日修改。

在 GitHub 上查看此页面 • 报告此内容的问题