答案是使用 list-style: none; 清除列表符号,配合 padding-left: 0 和 margin-left: 0 消除缩进残留;推荐加类名如 .no-bullet 精准控制,并可用 ::before 伪元素添加自定义图标。

去掉列表前面的圆点,核心是用 list-style: none;。
直接清除默认样式
无序列表(ul)和有序列表(ol)默认会显示项目符号或数字。只需在 CSS 中对列表元素设置:
-
list-style: none;—— 最常用,一步清空所有列表样式(包括符号、编号、图片) - 等价写法:
list-style-type: none;(仅移除符号 / 编号,不处理背景图或位置)
只针对特定列表生效
避免全局影响,推荐加类名精准控制:
- HTML:
<ul class="no-bullet"><li> 第一项 </li></ul> - CSS:
.no-bullet {list-style: none;}
注意内边距和缩进残留
去掉圆点后,ul 默认还有左内边距(padding-left)和缩进,视觉上仍像有空格。需一并重置:
立即学习 “ 前端免费学习笔记(深入)”;
-
padding-left: 0;—— 清除左侧内边距 -
margin-left: 0;—— 可选,防止外边距干扰布局 - 完整写法示例:
.no-bullet {list-style: none; padding-left: 0; margin-left: 0;}
如果要用自定义图标替代圆点
去掉默认符号后,可用 background-image 或 伪元素(::before)添加图标:
- 例如用小方块:
.custom-li::before {content: "■"; margin-right: 8px;} - 记得同时设
list-style: none;并取消默认缩进,才能让自定义图标对齐自然