阅读更多：<a href="https://sotoolbox.com/tag/CSS"
target="_blank" rel="nofollow">CSS 教程

方法一：使用padding属性

我们可以使用CSS的padding属性来移除列表项的缩进。通过将padding设置为0，我们可以消除列表项的缩进效果。具体代码如下所示：

li {
  padding-left: 0;
}

这样，所有的列表项将不再有缩进效果。

方法二：使用margin属性

除了使用padding属性，我们还可以使用CSS的margin属性来移除列表项的缩进。通过将margin设置为0，我们同样可以消除列表项的缩进效果。具体代码如下所示：

li {
  margin-left: 0;
}

这样，所有的列表项将不再有缩进效果。

方法三：使用list-style-position属性

另一种移除列表项缩进的方法是使用CSS的list-style-position属性。这个属性用于控制列表项的标记（marker）的位置。通过将list-style-position设置为inside，我们可以使列表项的标记出现在列表项的内部，从而达到消除缩进的效果。具体代码如下所示：

ul {
  list-style-position: inside;
}

使用这个方法，我们改变了整个无序列表（

<

ul>）的样式，使其列表项的标记出现在列表项的内部，从而消除了缩进效果。

方法四：使用text-indent属性

最后一种移除列表项缩进的方法是使用CSS的text-indent属性。这个属性用于控制块级元素（包括列表项）的首行缩进。通过将text-indent设置为负的标记宽度（通常是使用em单位来表示），我们可以使列表项的首行缩进消失。具体代码如下所示：

li {
  text-indent: -1em;
}

使用这个方法，我们通过负的标记宽度将列表项的首行缩进抵消，达到移除缩进的效果。

示例

假设我们有以下HTML代码：

<ul>
  <li>列表项 1</li>
  <li>列表项 2</li>
  <li>列表项 3</li>
</ul>

默认情况下，列表项在浏览器中会有缩进效果。现在，我们将应用上述方法来移除缩进。具体代码如下所示：

li {
  padding-left: 0;
  / 或者使用下面的任意一种方法 /
  margin-left: 0;
  list-style-position: inside;
  text-indent: -1em;
}

通过应用这些CSS属性，我们成功地移除了列表项的缩进效果，使其适应我们的页面设计。

总结

通过本文的介绍，我们了解了如何使用CSS来移除HTML列表项（