css list 左对齐

在HTML中，列表是一种常见的元素，通常用于呈现一系列相关的信息。CSS提供了一种简单的方式来控制列表的样式，包括控制列表项的对齐方式。

要将列表项左对齐，可以使用 list-style-position 属性。默认情况下，列表项的标记在列表项文本的左侧，可以在CSS中将其移动到列表项文本的内部：

ul {
    list-style-position: inside;
}

这将使列表项左对齐，因为标记的位置已更改。但是，这种方法可能会造成列表项无法被正常缩进，并且会造成排版混乱的问题。更好的方式是将标记位置保持不变，而是将文本向右移：

ul {
    padding-left: 0;
}

li {
    padding-left: 1em;
    text-indent: -1em;
}

这个代码块的第一行清除了默认列表的左侧填充，这样就可以创建一个自定义填充。然后，第二个块中的 padding-left 属性会添加一个自定义填充，其中包含一个 text-indent 值，该值向左移动文本与标记之间的空间。这个技巧可以允许标记和文本之间保持适当的间距，并且使列表项缩进像段落一样。

总的来说，将列表项左对齐需要一些CSS代码，但是这种技术确实允许开发人员完全控制他们的列表的外观，并允许列表与周围的文本一致。