CSS

Question

我花了几个小时在互联网上寻找解决方案。看来我的问题没有答案。

我使用这样的简单列表：

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

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

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

问题：如何在不触及 <li> 的填充的情况下偏移 list-style-type 以便在左侧创建 20px 的 space？ =44=] 我在互联网上找到的所有解决方案都说要向 <li> 添加填充，并在需要时创建补偿以粘贴网格。

我想实现这个：

到

Answer 1

你考虑过使用伪元素吗？

这个过程可以提供对子弹位置和形状的完全控制。

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

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

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

带有增量字符的项目符号

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

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

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

带有增量整数的项目符号

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

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

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

CSS - space 在项目符号和列表之间，不填充列表

CSS - space between the bullet and the list without padding the list

list

margin

padding

offset

带有增量字符的项目符号

带有增量整数的项目符号