CSS 实现去除 li 标签前圆点的多种方法

想要去掉li标签前面的圆点，你可以通过修改list-style属性来实现。在CSS中有几种常见的方法：

方法 1：设置 list-style-type: none

这种方法是最常见的，它完全去除li前的圆点。

<ul class="no-bullets">
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ul>
 
<style>
  .no-bullets {
    list-style-type: none; /* 去掉圆点 */
    padding: 0; /* 可选，去除默认内边距 */
    margin: 0;  /* 可选，去除外边距 */
  }
</style>复制

方法 2：单独使用 list-style

如果你需要同时控制样式和位置，可以使用list-style的简写形式。

<ul class="custom-list">
  <li>第一项</li>
  <li>第二项</li>
</ul>
 
<style>
  .custom-list {
    list-style: none; /* 简写形式 */
  }
</style>复制

方法 3：隐藏默认样式，通过伪元素自定义样式

如果想要自定义前面的图标，比如替换为一个图片或符号，可以通过伪元素实现。

<ul class="custom-list">
  <li>第一项</li>
  <li>第二项</li>
</ul>
 
<style>
  .custom-list {
    list-style-type: none; /* 去掉默认圆点 */
  }
 
  .custom-list li::before {
    content: "✔️"; /* 替换为自定义符号 */
    margin-right: 8px;
  }
</style>复制

方法 4：将 ul 设置为 inline-block 防止圆点意外出现

有时候，某些布局会因为ul标签的外部样式导致圆点仍然出现，这时可以设置display属性。

<ul class="inline-list">
  <li>第一项</li>
  <li>第二项</li>
</ul>
 
<style>
  .inline-list {
    list-style: none;
    display: inline-block;
  }
</style>复制

总结

去掉li前的圆点主要通过list-style-type: none实现，配合padding和margin调整布局。如果想自定义前面的符号，可以使用伪元素来代替。选择哪种方法取决于你的具体需求和设计目标。