在HTML有序列表中对齐数字

Question

我试图创建一个有序的编号列表，其中背景颜色交替变化。我需要数字出现在背景内部，并且对齐。如果我去掉list-style-position:inside;，数字会对齐，但会移动到背景之外。

以下是我的代码，并附有 jsfiddle 的链接。

https://jsfiddle.net/kwgpf/

ol {
  list-style-type: decimal;
  list-style-position: inside;
  margin: 1.5em;
}

.alt {
  background-color: #ccc;
}

<ol>
  <li>ha HA ha HA!</li>
  <li class="alt">ha HA ha HA!</li>
  <li>ha HA ha HA!</li>
  <li class="alt">ha HA ha HA!</li>
  <li>ha HA ha HA!</li>
  <li class="alt">ha HA ha HA!</li>
  <li>ha HA ha HA!</li>
  <li class="alt">ha HA ha HA!</li>
  <li>ha HA ha HA!</li>
  <li class="alt">ha HA ha HA!</li>
  <li>ha HA ha HA!</li>
  <li class="alt">ha HA ha HA!</li>
  <li>ha HA ha HA!</li>
  <li class="alt">ha HA ha HA!</li>
  <li>ha HA ha HA!</li>
</ol>

- PBG

Answer 1

你应该使用：

list-style: decimal inside none;

- Mircea Sandu

---

完整的属性（非缩写）是 list-style-position: inside，适用于任何想要进行位置控制的人。 - Thomas

您可以在此处阅读有关样式列表的更多信息：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_text/Styling_lists 并且您可以在此处阅读有关特定CSS的信息：https://developer.mozilla.org/zh-CN/docs/Web/CSS/list-style-type - davidhartman00

Answer 2

这是我现在能想到的最好方法。它有点hacky，但可以在现代浏览器上完成工作。

在JSFiddle上查看

ol {
  list-style-type: decimal;
  margin-left: 50px;
}

.alt {
  background-color: #ccc;
  position: relative;
}

.alt::before {
  position: absolute;
  display: inline-block;
  content: "";
  background-color: rgba(0, 0, 0, .2);
  left: -30px;
  height: 100%;
  width: 30px;
}

<ol>
  <li>ha HA ha HA!</li>
  <li class="alt">ha HA ha HA!</li>
  <li>ha HA ha HA!</li>
  <li class="alt">ha HA ha HA!</li>
  <li>ha HA ha HA!</li>
  <li class="alt">ha HA ha HA!</li>
  <li>ha HA ha HA!</li>
  <li class="alt">ha HA ha HA!</li>
  <li>ha HA ha HA!</li>
  <li class="alt">ha HA ha HA!</li>
  <li>ha HA ha HA!</li>
  <li class="alt">ha HA ha HA!</li>
  <li>ha HA ha HA!</li>
  <li class="alt">ha HA ha HA!</li>
  <li>ha HA ha HA!</li>
</ol>

- jamesplease

Answer 3

如果您愿意采用固定宽度的方法，您可以在以下第10个项目之前添加一个边距。

- Shrey Gupta