CSS 列表

HTML 的有序列表（<ol>）和无序列表（<ul>）可以通过 CSS 改变列表项前的标记（圆点、数字、自定义图等）、缩进和间距，让列表更符合页面风格。

相关 HTML 标签简述

• <ul>：无序列表，默认每项前是圆点。
• <ol>：有序列表，默认每项前是 1、2、3…
• <li>：列表项，写在 <ul> 或 <ol> 里面。

---

常用列表样式属性

属性	作用
list-style-type	标记类型（圆点、数字、方块等）
list-style-position	标记在内容内侧还是外侧
list-style-image	用图片做标记
list-style	简写

以上属性既可写在 ul / ol 上（整体），也可写在 li 上（单条）。

---

1. list-style-type（标记类型）

设置列表项前面的符号或编号样式。

无序列表常用值

ul.disc {
  list-style-type: disc;    /* 实心圆（默认） */
}

ul.circle {
  list-style-type: circle;  /* 空心圆 */
}

ul.square {
  list-style-type: square;  /* 方块 */
}

ul.none {
  list-style-type: none;   /* 无标记，常用于导航菜单 */
}

有序列表常用值

ol.decimal {
  list-style-type: decimal;      /* 1, 2, 3（默认） */
}

ol.upper-alpha {
  list-style-type: upper-alpha;  /* A, B, C */
}

ol.lower-roman {
  list-style-type: lower-roman;  /* i, ii, iii */
}

其他还有 lower-alpha、upper-roman 等。

---

2. list-style-position（标记位置）

控制标记在内容盒子的内侧还是外侧。

ul.inside {
  list-style-position: inside;   /* 标记在内容内侧，与文字一起缩进 */
}

ul.outside {
  list-style-position: outside; /* 默认：标记在内容外侧 */
}

• outside：标记在左侧，不随文字换行。
• inside：标记和文字一起缩进，长文本换行时从标记下方开始。

---

3. list-style-image（图片标记）

用一张图片代替默认的圆点或数字。

ul.custom {
  list-style-image: url("bullet.png");
}

图片会按内容高度缩放，若图片太大或比例不合适，可能不好看。更灵活的做法是用 list-style-type: none 去掉默认标记，再用 ::before 伪元素做自定义标记（见 CSS 伪元素）。

---

4. list-style 简写

把类型、位置、图片写在一行。顺序不严格，一般：type position image。

ul {
  list-style: square outside;
}

ul.img {
  list-style: url("bullet.png") inside;
}

若用了 list-style-image，list-style-type 会作为图片无法显示时的后备。

---

去掉默认标记与间距（做导航时常用）

很多导航菜单是用 <ul><li> 做的，会先去掉默认圆点和左边距：

ul.nav {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
}

ul.nav li {
  display: inline-block;  /* 或 float / flex，让项横排 */
  margin-right: 1em;
}

---

小结

• 标记类型：list-style-type（disc / circle / square / decimal / none 等）。
• 标记位置：list-style-position（inside / outside）。
• 图片标记：list-style-image: url(...)；复杂样式可用 none + 伪元素。
• 简写：list-style；做导航时常用 list-style-type: none 和 padding-left: 0。

下一节学习 CSS Table（表格）：表格边框、间距与样式。