CSS 列表样式

列表在网页里无处不在，导航菜单、文章目录、功能清单，背后都是列表。默认的小圆点和小序号够用但不精致，CSS 提供了完整的列表样式方案。

列表的三种基本类型

ul 无序列表、ol 有序列表、dl 描述列表，三种各有用途。

<ul>
  <li>苹果</li>
  <li>香蕉</li>
</ul>

<ol>
  <li>第一步</li>
  <li>第二步</li>
</ol>

ul 默认显示小圆点，ol 默认显示数字序号。

标记就是每项前面的圆点或序号，用 list-style-type 控制。

ul {
  list-style-type: square;
}
ol {
  list-style-type: lower-roman;
}

无序列表常用 disc 圆点、circle 空心圆、square 方块。有序列表有 decimal 数字、lower-alpha 小写字母、lower-roman 小写罗马数字。

想完全去掉标记，用 none。

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

注意 list-style-type: none 之后还要把 padding 清掉，否则前面的位置还留着空白。菜单类列表基本都这么干。

内置标记太普通，可以换成图片或字符。

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

list-style-image 用图片当标记，但图片大小不好控制，实际项目里更推荐用背景图或者伪元素，可控性更强。

ul.custom {
  list-style-type: none;
  padding-left: 20px;
}
ul.custom li::before {
  content: "→ ";
  color: #3498db;
}

用 CSS 伪元素在每项前面插入箭头字符，颜色大小都能控制，比图片灵活。

标记在文本外面还是里面，用 list-style-position 控制。

ul {
  list-style-position: inside;
}

默认是 outside，标记在文字左侧独立位置，长文本换行时标记保持在左侧。改成 inside 后标记跟着文字一起缩进，换行时标记在行内。用 outside 加左边距排版更整齐。

list-style 一行写完类型、位置、图片，顺序随意。

ul {
  list-style: square inside;
}

多级列表每个层级用不同标记，层次更清楚。

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

第一层圆点，第二层空心圆，第三层方块，层层递进。

列表样式围绕标记做文章。list-style-type 选类型，list-style-image 用图片，list-style-position 定位置。做菜单导航时记得 none 加清 padding。想更精致就用伪元素自己画标记。