在 HTML 有序列表中对齐数字

Question

我正在尝试创建一个背景颜色交替的有序编号列表。我需要数字出现在背景中，并排成一行。如果我取出list-style-position:inside;，数字会排成一行，但移到背景之外。

这是我的代码，下面有 jsfiddle 的链接。

<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>    

ol
{
    list-style-type:decimal;
    list-style-position:inside;
    margin:1.5em;
}
.alt
{
    background-color:#ccc;
}

http://jsfiddle.net/kwgpf/

Answer 1

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

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;
}​

View on JSFiddle

Answer 2

如果您愿意采用固定宽度路线，您可以在 #10 以下的每个项目符号之前添加一个边距。

Answer 3

你应该使用：

list-style: decimal inside none;