想要去掉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实现,配合paddingmargin调整布局。如果想自定义前面的符号,可以使用伪元素来代替。选择哪种方法取决于你的具体需求和设计目标。

Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐