在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

这是我现在能想到的最好的办法了。这有点老生常谈，但它可以在现代浏览器上完成这项工作。

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

您应该使用：

list-style: decimal inside none;

Answer 3

如果你愿意走固定宽度的路线，你可以在#10下面的每个项目符号前加上一个空白处。