本文介绍如何通过css去除html中无序列表（ul）菜单项前的默认圆点（bullet points），并提供简洁有效的解决方案及注意事项。

在构建导航菜单时，开发者常使用

和
• 标签创建水平或垂直菜单。但默认情况下，
  会为每个
  • 项渲染一个圆点（•）作为项目符号（list marker），这在纯图标+文字的现代菜单中往往显得冗余甚至破坏设计一致性。

    要彻底移除这些圆点，关键在于重置列表样式，而非仅处理文本装饰（如 text-decoration: none 只影响链接下划线，对圆点无效）。正确做法是为

    元素设置：

    ul {
      list-style-type: none;
      padding-left: 0; /* 移除默认左侧内边距，避免内容偏移 */
      margin: 0;        /* 可选：重置默认外边距，便于精确布局 */
    }

    ✅ 说明：

    
    Html2md
    使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...
    下载
    • list-style-type: none 是核心声明，直接禁用所有项目符号（包括圆点、方块、数字等）；
    • padding-left: 0 非常重要——即使去除了圆点，浏览器仍会保留默认的左侧内边距（通常为 40px），导致菜单项整体右移，视觉上“留白异常”；
    • 若菜单项内含 标签，建议同时添加 text-decoration: none 消除链接下划线，实现清爽效果。

    ⚠️ 注意事项：

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

    • 该样式应作用于具体的菜单容器（如 .nav-menu ul），避免全局污染其他列表；
    • 若需保留语义化结构但隐藏圆点，切勿使用 display: none 或 visibility: hidden 作用于
    • ，否则可能影响可访问性（屏幕阅读器无法识别列表结构）；
    • 在Flex/Grid布局中，list-style-type: none 仍是首选方案，与现代布局方式完全兼容。

    综上，list-style-type: none 是标准、语义清晰且无障碍友好的解决方案，配合合理的盒模型重置，即可快速打造专业级无符号导航菜单。