如何让偶数列表项背景色铺满容器左侧且文本保持15px缩进？

这是个很常见的CSS盒模型问题，根源在于margin-left的特性——它是元素外部的间距，背景色只会覆盖元素自身的content、padding和border区域，不会延伸到margin的空白里。给你两个实用的解决思路：

方法一：用padding-left替代margin-left（推荐） #

把li的margin-left: 15px改成padding-left: 15px，这样背景色会自然填充padding区域，文本也会向右缩进15px，完美解决背景不铺满左侧的问题。如果你的列表项有默认的项目符号，还可以根据需求调整符号位置：

ul {
  list-style: disc; /* 保留你原有的列表样式设置 */
  padding-left: 0; /* 去掉ul默认的内边距，避免双重缩进 */
}
li {
  /* 替换原来的margin-left为padding-left */
  padding-left: 15px;
  /* 可选：如果希望项目符号跟着文本一起缩进，加上这行 */
  list-style-position: inside;
}
li:nth-child(even) {
  background-color: #f0f0f0; /* 你的浅灰色背景 */
}

方法二：用text-indent实现文本缩进 #

如果你想保留项目符号在容器左边缘的布局，也可以用text-indent来让文本单独缩进，同时让li的宽度铺满容器：

li {
  margin-left: 0; /* 移除原来的margin-left */
  text-indent: 15px; /* 仅让文本缩进15px */
}
li:nth-child(even) {
  background-color: #f0f0f0;
}

这种方式下，项目符号会留在容器最左侧，只有文本向右缩进，适合特定的视觉需求。

总的来说，第一种方法的布局逻辑更清晰，padding属于元素内部空间，背景覆盖的表现更符合直觉，也更易于后续维护。

内容的提问来源于stack exchange，提问作者nCardot