css列表样式list-style类型与图标设置

list-style用于设置列表标记样式，可定义类型、图片和位置。常用list-style-type改变符号，如disc、square、decimal等；list-style-image支持自定义图片；list-style-position控制符号内外位置；简写属性可合并设置，提升开发效率。

在CSS中，list-style 属性用于控制列表项的标记样式，常用于改变无序列表（ul）和有序列表（ol）前面的符号或编号类型。它是一个简写属性，可以同时设置标记类型、图标和位置。

list-style-type：设置列表项标记类型

该属性定义列表项前的项目符号或编号样式。

• disc：实心圆点（默认）
• circle强>：空心圆圈
• square：实心方块
• none：无标记（常用于导航菜单等不需要符号的场景）

• decimal：数字（1, 2, 3...）
• lower-alpha：小写字母（a, b, c...）
• upper-alpha：大写字母（A, B, C...）
• lower-roman：小写罗马数字（i, ii, iii...）
• upper-roman：大写罗马数字（I, II, III...）
• none：不显示编号

示例：

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

list-style-image：使用自定义图片作为项目符号

如果想用图片代替默认符号，可以使用 list-style-image 属性。

立即学习“前端免费学习笔记（深入）”；

语法：

list-style-image: url('icon.png');

注意：图片大小需适中，过大可能影响布局。若图片未正常显示，建议检查路径是否正确，或考虑使用背景图像方式更灵活控制。

list-style-position：设置标记位置

控制项目符号出现在列表项内容内部还是外部。

爱图表

AI驱动的智能化图表创作平台

99

查看详情

• outside：符号在列表项外侧（默认）
• inside：符号在列表项内容内侧，文本会缩进对齐

示例：

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

list-style 简写属性

可一次性设置 type、position 和 image。

语法顺序：

list-style: [list-style-type] [list-style-position] [list-style-image];

示例：

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

提示：如果同时设置了 list-style-image 和 list-style-type，图像无法加载时会回退到 type 指定的符号。

基本上就这些。合理使用 list-style 可以让列表更美观，也便于语义化布局。实际开发中，有时会将 list-style 设为 none，再通过 background 或伪元素自定义样式，实现更复杂的视觉效果。

以上就是css列表样式list-style类型与图标设置的详细内容，更多请关注php中文网其它相关文章！