本文介绍如何通过css去除html菜单（如ul/li结构）默认显示的圆点（项目符号），并提供简洁有效的解决方案，适用于导航栏、侧边菜单等常见场景。
在HTML中，使用
- （无序列表）构建导航菜单时，浏览器会默认为每个
- 项渲染一个圆点（即项目符号），这在现代扁平化设计中往往显得冗余或与UI风格冲突。即使已通过 text-decoration: none 移除了链接下划线，该属性对列表符号完全无效——因为圆点属于列表样式（list-style），而非文本装饰。
✅ 正确解决方法是重置
- 元素的列表样式：
nav ul { list-style-type: none; /* 彻底移除圆点、方块等所有项目符号 */ padding-left: 0; /* 可选：清除默认左内边距，使菜单贴左对齐 */ margin: 0; /* 可选：重置默认外边距，便于精确控制布局 */ }? 注意事项：
- list-style-type: none 必须作用于
- （或
- ）容器元素，而非
- —— 对
- 设置该属性通常无效；
- 若菜单嵌套多层（如二级下拉菜单），建议为对应层级的 ul 单独设置，避免样式污染；
- 如需进一步自定义符号（如用图标替代圆点），可结合 list-style-image 或更推荐的 ::before 伪元素方案；
- 始终搭配 padding 和 margin 重置，否则即使去除了圆点，列表仍可能因浏览器默认样式而缩进，影响整体布局一致性。
总结：移除菜单圆点的核心是 list-style-type: none，配合合理的盒模型重置，即可获得干净、可控的无符号菜单结构。
立即学习“前端免费学习笔记（深入）”；
- list-style-type: none 必须作用于
