CSS - 项目符号和列表之间的空格而不填充列表

Question

我花了几个小时在网上寻找解决方案。我的问题似乎没有答案。

我像这样使用简单的侦听：

<ul class="list">
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

我的list-style-type是lower-alpha。直到那里它是非常基本的。

问题：list-style-type未与我的网格对齐。

问题：我如何偏移list-style-type以便在不触及<li>填充的情况下向左创建20px的空间？我所有的解决方案互联网上发现，如果需要粘贴网格，可以在<li>添加填充并创建补偿。

我想实现这个目标：

到

Answer 1

您是否考虑过制作sudo元素？

此过程可以完全控制子弹的位置和形状。

＆＃13;

＆＃13;

li {
  list-style: none;
  position: relative;
}

li::before {
  content: '•';
  position: absolute;
  left: -30px;
}

＆＃13;

<ul class="list">
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

具有增量字符的项目符号

＆＃13;

＆＃13;

li {
  list-style: none;
  position: relative;
  counter-increment: Count;
}

li::before {
  content: counter(Count, lower-alpha) ".";
  position: absolute;
  left: -30px;
}

＆＃13;

<ul class="list">
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

具有增量整数的项目符号

＆＃13;

＆＃13;

li {
  list-style: none;
  position: relative;
  counter-increment: Count 1;
}

li::before {
  content: counter(Count) ")";
  position: absolute;
  left: -30px;
}

＆＃13;

<ul class="list">
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

＆＃13;

＆＃13;

＆＃13;