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，但它可以在现代浏览器上完成工作。

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 3

如果您愿意使用固定宽度路线，您可以在＃10下方的每个子弹之前添加一个边距。

Answer 4

与问题无关，但是您可以执行以下操作，而不是向其他所有li添加类来更改背景颜色：

li:nth-child(even) {
  background-color: #ccc;
}

对齐HTML有序列表中的数字

4 个答案: