将列表项移到左侧 CSS

在 HTML 中创建列表时，默认情况下列表项会在左侧留出一定的缩进。但是，如果您希望将列表项移动到左侧，而不是保留缩进，则可以使用 CSS 来实现。

1. 使用 text-indent

text-indent 属性可用于设置文本内容（包括列表项）相对于其容器块（即 <ul> 或 <ol>）左侧的缩进量。因此，当将 text-indent 设置为 -20px 时，列表项将从其默认位置向左移动 20 像素。

ul {
  list-style: none;
  padding: 0;
}

li {
  text-indent: -20px;
}

2. 使用 margin

另一种将列表项移到左侧的方法是使用 margin 属性。通过将 margin-left 设置为负值，可以将列表项向左移动。与 text-indent 不同，需要将 padding-left 设置为希望列表项与左侧之间保留的距离。

ul {
  list-style: none;
  padding: 0;
}

li {
  margin-left: -20px;
  padding-left: 20px;
}

3. 使用 position

还有一种较为高级的方法是使用 position 属性。与 margin 类似，使用负的 left 值可以将列表项向左移动。

ul {
  list-style: none;
  padding: 0;
}

li {
  position: relative;
  left: -20px;
}

总结

这些技术和属性可用于将列表项移动到左侧，您可以根据自己的喜好和页面布局的需要选择其中一种方法。