如何移除HTML菜单项前的圆点符号（项目符号）

来源：AI社区作者：缅甸程序员头衔：程序员

导读：本期聚焦于小伙伴创作的《如何移除HTML菜单项前的圆点符号（项目符号）》，敬请观看详情，探索知识的价值。以下视频、文章将为您系统阐述其核心内容与价值。如果您觉得《如何移除HTML菜单项前的圆点符号（项目符号）》有用，将其分享出去将是对创作者最好的鼓励。

在HTML中，使用<ul>标签创建的无序列表，默认会在每个<li>列表项前显示实心圆点作为项目符号，在制作导航菜单、自定义内容列表时，这个默认样式经常需要被移除。我们可以通过CSS样式来调整列表的表现，去掉不需要的圆点符号。

方法一：给单个ul列表设置样式

如果只需要移除某一个特定菜单列表前的圆点符号，可以直接给该<ul>标签添加行内样式，或者给该列表设置独立的类选择器样式。

直接在<ul>标签中使用style属性设置list-style-type为none即可，代码如下：

<ul style="list-style-type: none;">
  <li>首页</li>
  <li>产品中心</li>
  <li>关于我们</li>
  <li>联系我们</li>
</ul>

如果页面中有多个需要统一调整的列表，也可以先定义CSS类，再给对应的<ul>添加类名，示例代码如下：

<style>
  .no-dot-list {
    list-style-type: none;
  }
</style>
<ul class="no-dot-list">
  <li>新闻资讯</li>
  <li>行业动态</li>
  <li>政策法规</li>
</ul>

如果希望页面中所有的无序列表都默认不显示圆点符号，可以在CSS全局样式中设置<ul>标签的list-style-type属性为none，代码如下：

/* 全局设置所有无序列表不显示项目符号 */
ul {
  list-style-type: none;
  /* 可选：移除列表默认的左侧内边距，让列表项对齐更自然 */
  padding-left: 0;
}

除了单独设置list-style-type，还可以使用list-style简写属性，该属性可以同时设置项目符号类型、项目符号图片、项目符号位置三个值，移除圆点符号的写法如下：

.menu-list {
  /* list-style: 项目符号类型 项目符号图片 项目符号位置 */
  list-style: none;
}

list-style-type属性是所有主流浏览器都支持的基础CSS属性，包括Chrome、Firefox、Safari、Edge等，没有兼容性问题，可以放心使用。

如果需要兼容非常老旧的浏览器（如IE6及以下），list-style-type: none同样支持，不需要额外添加兼容代码。

HTML list_style_type CSS ul li修改时间：2026-06-10 02:09:36

免责声明：已尽一切努力确保本网站所含信息的准确性。网站内容多为原创整理与精心编撰，观点力求客观中立。本站旨在免费分享，内容仅供个人学习、研究或参考使用。若引用了第三方作品，版权归原作者所有。如内容涉及您的权益，请联系我们处理。