列表（List）

CSS 提供了多种方法来美化 无序列表（<ul>）、有序列表（<ol>）和定义列表（<dl>），可以使用 list-style 相关属性以及 display、flex 等进行布局调整。

---

1. list-style（列表样式的简写）

list-style 是以下三种属性简写

• list-style-type
• list-style-position
• list-style-image

ul {
  list-style: square inside url('bullet.png');
}

等同于：

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

✅ 适用于 简化代码。

---

2. list-style-type（设置列表符号样式）

用于定义无序列表（<ul>）的项目符号（●）和有序列表（<ol>）的编号格式。

ul {
  list-style-type: square;
}

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

常见 list-style-type 值

值	适用于	说明
disc	ul	● 默认圆点
circle	ul	○ 空心圆
square	ul	■ 方块
none	ul, ol	无项目符号
decimal	ol	1, 2, 3, 4...（默认）
decimal-leading-zero	ol	01, 02, 03...
lower-roman	ol	i, ii, iii...
upper-roman	ol	I, II, III...
lower-alpha	ol	a, b, c...
upper-alpha	ol	A, B, C...

✅ 适用于 目录、FAQ、项目清单。

---

3. list-style-position（列表符号的位置）

用于控制项目符号（●、1.）的位置，有两个值：

ul {
  list-style-position: inside;
}

值	说明
outside	默认值，项目符号在列表项外部
inside	项目符号与文本对齐

示例：

ul {
  list-style-type: square;
  list-style-position: inside;
}

✅ 适用于 让列表项目符号对齐文本。

---

4. list-style-image（自定义列表图标）

可以使用图片替代默认的列表符号。

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

✅ 适用于 让 UI 更有特色。

---

5. 移除列表默认样式

如果要完全去掉默认的列表样式（如项目符号或编号），可以使用：

ul, ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

✅ 适用于 自定义导航栏、菜单等。

---

6. 自定义列表项间距

li {
  padding: 8px;
  border-bottom: 1px solid #ccc;
}

✅ 适用于 让列表更整齐、美观。

---

7. 让列表水平排列（如导航菜单）

方法 1：使用 display: flex

ul {
  display: flex;
  gap: 10px; /* 控制间距 */
}

方法 2：使用 inline-block

li {
  display: inline-block;
  margin-right: 10px;
}

✅ 适用于 导航栏、菜单。

---

8. 使用 counter-reset 自定义有序列表编号

ol {
  counter-reset: custom-counter;
}

li {
  counter-increment: custom-counter;
}

li::before {
  content: "Step " counter(custom-counter) ": ";
  font-weight: bold;
}

✅ 适用于 自定义编号的步骤列表。

---

9. 自定义下拉菜单（多级列表）

nav ul {
  list-style: none;
  padding: 0;
}

nav ul li {
  position: relative;
  display: inline-block;
}

nav ul li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #eee;
  padding: 10px;
}

nav ul li:hover ul {
  display: block;
}