CSS 列表

网站

CSS 列表

list-style | MDN

引入

网页中的列表用来展示一组相关的内容，例如导航菜单、特性列表、步骤说明等。

HTML 列表默认会显示标记符号，无序列表显示圆点，有序列表显示数字。CSS 可以控制这些标记符号的样式、位置，甚至替换成自定义图片。

正文

定义

list-style 控制 HTML 列表的外观，包括：

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

list-style-type

无序列表：修改默认的圆点为其他图案，如：list-style-type: square; 方形

有序列表：修改默认的序号为其他序号，如：list-style-type: upper-roman; 大写罗马数字

list-style-position

默认值是 outside，长文本换行后会在标记符号后与上一行文本对齐输出；
可以设置 inside，长文本换行后会对齐标记符号后输出。

list-style-image

自定义标记符号，注意保证图片应为小尺寸，用例：list-style-image:url('https://example.com/image.jpg');

简写

可以简写为 list-style: square inside url('https://example.com/image.jpg')

顺序可以任意，浏览器会自动识别。

例子

修改列表标记样式

<ul class="custom-list">
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ul>

.custom-list {
  list-style-type: square; /* 方形标记 */
}

移除列表标记

ul {
  list-style: none; /* 移除所有标记 */
  padding-left: 0; /* 移除默认的左侧内边距 */
}

常用于导航菜单或自定义列表样式。

自定义标记图片

ul {
  list-style-image: url('check-icon.png');
}

用自定义图片替换默认的标记符号，图片应该是小尺寸的，通常 16x16 或 20x20 像素。

特点

• list-style-type 控制标记符号的类型
• list-style-position 控制标记符号的位置（内部或外部）
• list-style-image 用图片替换标记符号
• list-style 是简写属性，可以同时设置三个属性
• 无序列表的常见标记类型：disc（实心圆点）、circle（空心圆点）、square（方形）
• 有序列表的常见标记类型：decimal（数字）、lower-alpha（小写字母）、upper-roman（大写罗马数字）
• list-style: none 可以移除所有标记符号

注意事项

• 移除列表标记后，通常也要移除左侧内边距：padding-left: 0
• 自定义标记图片应该保持小尺寸，否则会影响布局
• list-style-position: inside 会让标记符号占用内容区域，可能导致文本对齐问题
• list-style-position: outside 是默认值，标记符号在内容区域外部
• list-style-image 的图片路径可以是相对路径或绝对路径
• 如果需要更灵活的列表样式，可以使用伪元素 ::before 代替 list-style

理解

可以把 list-style 理解为”列表标记的装饰工具”。

它让列表不只是简单地显示默认的圆点或数字，而是可以根据设计需求修改标记符号的类型、位置，甚至替换成自定义图片。

例如，导航菜单通常会移除列表标记，特性列表可能使用方形标记，步骤说明可能使用数字或罗马数字，自定义设计可能使用图标作为标记。

list-style 的核心价值是让列表的视觉效果更灵活，不受默认样式限制，同时保持 HTML 的语义化结构。

引出

理解了列表样式之后，可以继续学习：

• CSS 伪类：使用 :first-child、:last-child 等伪类为特定列表项添加样式
• CSS 树结构伪类：使用 :nth-child() 为奇偶列表项设置不同样式
• 伪元素：使用 ::before 创建更灵活的自定义列表标记

也可以学习如何用 Flexbox 或 Grid 布局创建更复杂的列表效果。