list-style-type 设置列表标记样式,如 disc、square、decimal 等;list-style-position 控制标记位置为 inside 或 outside;两者可通过 list-style 简写合并设置。

在CSS中,list-style-type 和 list-style-position 是用来控制列表项()前面的项目符号或编号样式的两个关键属性。它们通常应用于无序列表()和有序列表()中的列表项,帮助我们自定义列表的外观。
list-style-type:设置项目符号或编号类型
list-style-type 属性用于定义列表项前的标记样式。不同的列表类型对应不同的视觉符号。
常见取值包括:- disc:实心圆点(默认无序列表样式)
- circle:空心圆圈
- square:实心方块
- decimal:阿拉伯数字(1, 2, 3...),有序列表默认
- lower-roman:小写罗马数字(i, ii, iii...)
- upper-alpha:大写英文字母(A, B, C...)
- none:不显示任何标记,常用于导航菜单等去样式场景
示例:
ul { list-style-type: square; }
ol { list-style-type: lower-roman; }
list-style-position:控制标记的位置
list-style-position 决定列表标记(如圆点或数字)相对于列表项内容的位置。
立即学习“前端免费学习笔记(深入)”;
主要取值有两个:- inside:标记位于列表项内容内部,与文本在同一行起始处对齐
- outside:标记位于列表项外部,默认行为,通常由浏览器处理缩进
区别说明:
- 使用 inside 时,文本可能与标记对齐更紧密,适合需要精确排版的场景
- 使用 outside 时,标记不占内容流位置,列表整体缩进更自然
示例:
ul {
list-style-type: disc;
list-style-position: inside;
}
简写属性:list-style
你可以用 list-style 一次性设置 type、position,甚至 image(图片标记)。
ul {
list-style: square inside;
}
ol {
list-style: upper-alpha outside;
}
顺序不限,但推荐先 type 后 position。如果省略其中一个,将使用默认值。
基本上就这些。合理使用这两个属性,能让你的列表更符合设计需求,无论是文档排版还是界面组件都能灵活控制。










