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

你应该使用:

list-style: decimal inside none;

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>