CSS：不修改<li>内边距，如何将列表符号左移20px对齐网格？

嘿，我懂你这种搜了好几个小时都找不到答案的抓狂感！折腾半天确实让人头大，不过这个问题其实有挺直接的解决办法，而且完全不用动<li>的内边距。

方法一：使用CSS ::marker 伪元素（现代浏览器推荐） #

这是最精准的方案，直接针对列表符号本身调整，完全不会影响<li>的内容布局：

.list {
  list-style-type: lower-alpha;
  /* 保留你原来的基础设置即可 */
}

.list li::marker {
  /* 将列表符号向左偏移20px */
  transform: translateX(-20px);
}

原理说明 #

::marker是专门用来控制列表项目符号的CSS伪元素，通过transform: translateX(-20px)可以直接将符号向左平移指定距离，<li>的内边距、内容位置都不会受到任何影响，完美匹配你的需求。

方法二：兼容旧浏览器的方案 #

如果需要兼容不支持::marker的旧浏览器（比如IE），可以通过调整<ul>的外边距和内边距来实现：

.list {
  list-style-type: lower-alpha;
  /* 默认<ul>会有padding-left来容纳符号，保持这个值不变 */
  padding-left: 40px; /* 这个值可根据你当前的默认样式调整，通常默认是40px */
  /* 向左偏移20px，让符号超出<ul>的容器范围 */
  margin-left: -20px;
}

原理说明 #

默认情况下，列表符号是放在<ul>的padding-left区域内的，我们通过给<ul>设置负的margin-left，让符号向左“伸出去”20px，同时保持padding-left不变，这样<li>的内容位置完全不受影响，也不用改动<li>的内边距。

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