13

我正在尝试创建一个背景颜色交替的有序编号列表。我需要数字出现在背景中，并排成一行。如果我取出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/

4

3 回答 3

28

你应该使用：

list-style: decimal inside none;
于 2013-03-25T06:57:15.633 回答
2

这是我现在能想到的最好的。这有点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;
}​

在 JSFiddle 上查看

于 2012-12-27T18:13:36.863 回答
1

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

于 2012-12-27T18:59:32.540 回答