使用 CSS 自定义列表的深入指南

This first rule of styling lists is that they should be treated with the same reverence you would show any other text. If a list is inserted within a passage of text, treat it as a continuation and integral part of that text.

样式化列表的第一条规则是，它们应该以你对待任何其他文本相同的敬意来对待。如果列表插入到一段文本中，将其视为该文本的延续和组成部分。

For bulleted or unordered lists, use padding to indent each list item the equivalent distance of a line height. This will allow the bullet to sit neatly in a square of white-space.

对于项目符号或无序列表，使用 padding 将每个列表项缩进相当于一行高度的距离。这将允许项目符号整齐地坐在一个空白空间方块中。

ul { padding-inline-start: 1lh; }

Numbered or ordered lists which reach into double figures and beyond will require more space. Allocate this space in multiples and fractions of the line height.

达到两位数及以上的编号或有序列表将需要更多空间。以行高的倍数和分数来分配这个空间。

The basics: choosing different kinds of lists

基础知识：选择不同类型的列表

Unordered lists

无序列表

Unordered lists are given filled discs for bullets by default. As lists are further nested, browsers apply circles. These are followed by filled squares for lists nested three or more deep.

无序列表默认使用填充的圆点作为项目符号。当列表进一步嵌套时，浏览器会应用圆圈。接着是填充的方块，用于嵌套三层或更深的列表。

You can change which bullets are used through the list-style-type property with values of disc, circle and square respectively. For example, to make all unordered list items filled squares use:

您可以通过 list-style-type 属性更改使用的项目符号，值分别为 disc、circle 和 square。例如，要使所有无序列表项为实心方块，请使用：

ul li { list-style-type: square; }

If you want to use a different symbol for a bullet you can do so by specifying it in quote marks. You’re not limited to individual characters – as well as regular glyphs, you can use words and emoji.

如果您想为项目符号使用不同的符号，可以通过在引号中指定它来实现。您不仅限于单个字符 – 除了常规字形外，还可以使用单词和 emoji。

The -type suffix of list-style-type implies that the bullets are typographical. You can also use images for your list bullets. Link to your image using the list-style-image property.

list-style-type 的 -type 后缀暗示项目符号是排版式的。你也可以为列表项目符号使用图像。使用 list-style-image 属性链接到你的图像。

You can position the bull...