CSS 列表

CSS 列表样式

定制有序列表和无序列表的外观。

CSS 提供了属性来控制 HTML 列表中使用的标记（点或数字）：

更改有序列表（<ol>）的标记类型。
更改无序列表（<ul>）的标记类型。
使用自定义图片作为列表标记。
控制标记位置（inside/outside）。
完全移除标记。

HTML 列表基础回顾

回顾两种主要的 HTML 列表类型：

无序列表（<ul>）：列表项（<li>）通常用点标记。
有序列表（<ol>）：列表项（<li>）通常用连续的数字或字母标记。

CSS 允许您覆盖这些默认标记。

更改列表项标记（`list-style-type`）

list-style-type 属性指定要使用的标记类型。

<ul>（无序列表）的常用值：

disc（默认）：实心圆。
circle：空心圆。
square：实心方块。
none：无标记。

<ol>（有序列表）的常用值：

decimal（默认）：数字（1、2、3…）。
decimal-leading-zero：带前导零的数字（01、02、03…）。
lower-roman：小写罗马数字（i、ii、iii…）。
upper-roman：大写罗马数字（I、II、III…）。
lower-alpha / lower-latin：小写字母（a、b、c…）。
upper-alpha / upper-latin：大写字母（A、B、C…）。

示例：

/* Unordered lists */
.list-circles {
  list-style-type: circle;
}

.list-squares {
  list-style-type: square;
}

/* Ordered lists */
.list-roman {
  list-style-type: upper-roman;
}

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

使用图片作为列表标记（`list-style-image`）

您可以使用 list-style-image 属性指定一个图片文件作为列表标记。

ul.custom-marker {
  list-style-image: url('images/custom-bullet.png');
}

注意事项：使用 list-style-image 精确控制图片标记的位置和对齐方式有时在不同浏览器中可能不一致，或者难以微调。标记的大小由图片本身决定。

替代方案（更灵活）：使用背景图片

一种更常见、更灵活的自定义图片标记技术是移除默认标记，然后将背景图片应用于 <li> 元素。

这种方法让您可以完全控制标记的位置、大小（如果需要，通过 background-size）以及使用内边距控制间距。

使用背景图片的示例：

ul.background-marker {
  list-style-type: none; /* 移除默认标记 */
  padding-left: 0; /* 移除浏览器通常添加的默认内边距 */
  margin-left: 0;
}

ul.background-marker li {
  padding-left: 25px; /* 为背景图片留出空间 */
  background-image: url('images/custom-bullet.png');
  background-repeat: no-repeat;
  background-position: left center; /* 定位图片 */
  /* background-size: 15px 15px; 可选：控制图片大小 */
  margin-bottom: 5px; /* 列表项之间的间距 */
}

解释：

对于 <ul>：移除默认标记（list-style-type: none;）并重置浏览器默认缩进（padding-left: 0;）。
对于 <li>：添加左内边距（padding-left）以将文本内容向右推，为标记创建空间。
应用 background-image，阻止其重复（background-repeat: no-repeat;）。
在内边距区域内定位背景图片（background-position: left center;）。根据需要调整。
可选择使用 background-size 控制图片大小。

列表标记位置（`list-style-position`）

list-style-position 属性指定列表标记出现在内容流的内部还是外部。

outside（默认）：标记位于列表项文本块的左侧。文本换行时与文本的起始位置对齐。
inside：标记放置在列表项文本块内部，就像它是第一行的一部分一样。文本换行时与标记对齐。

示例：

ul.inside-marker {
  list-style-position: inside;
  border: 1px solid #ccc; /* 用于可视化文本块 */
  width: 200px;
}

ul.outside-marker {
  list-style-position: outside;
  border: 1px solid #ccc;
  width: 200px;
  margin-top: 10px;
}

当文本换行时，差异最明显。

列表简写属性（`list-style`）

list-style 属性是 list-style-type、list-style-position 和 list-style-image 这三个属性的简写形式，可以在一个声明中设置。

值通常按以下顺序书写：type position image。

示例：

ul.shorthand-example {
  /* 设置类型为 square，位置为 inside，并指定图片 */
  /* 如果图片加载失败，类型 (square) 将作为后备方案 */
  list-style: square inside url('images/custom-bullet.png');
}

如果省略了任何值，将使用其默认值（例如，list-style: circle; 意味着位置为 outside，图片为 none）。

常见用法：在使用自定义样式方法（如背景图片技术或 flexbox/grid 进行布局）时，设置 list-style: none; 是移除默认标记和内边距/外边距的常用方法。

CSS 列表属性总结

属性	描述
`list-style-type`	指定标记的类型（disc, circle, square, decimal 等）。
`list-style-image`	指定用于列表标记的图片。
`list-style-position`	指定标记出现在内容流的内部还是外部。
`list-style`	在一个声明中设置 type、position 和 image 的简写形式。

进一步阅读：MDN 列表样式指南

CSS 列表

CSS 列表样式

HTML 列表基础回顾

更改列表项标记（list-style-type）

使用图片作为列表标记（list-style-image）