如何为列表中的项目添加背景色

<ol>
<li><div>Lorem ipsum dolor sit amet, consectetur ...</div></li>
<li><div>Some more text ...</div></li>
</ol>

然后为div添加以下CSS:

ol li div  {
  width: 100%;
  height: 100%;
  background-color: #FFAAAA;
  margin-left: -20px;
  padding-left: 20px;
}

这将移动div以显示在数字(即-20px值)下,并将其中的文本移回正确的位置(即20px值)。

你能不能用list position:inside来代替outside,设置背景,然后用一个负的左边距把它推出去?

一个可以尝试的方法是 text-indent

li {
    list-style-position: inside;
    text-indent: -1em;
    padding: 10px 2em;
    background-color: lime;
}
li.odd {
    background-color: aqua;
}

我使用了一个负文本缩进来拉出第一行文本,然后使用左填充将所有内容拉回到对齐状态。您可能需要稍微调整一下文本缩进和填充值。我只测试了带有一位数的列表项。

display: block;

下面是一个代码笔,演示如何设置列表项的样式: http://codepen.io/anon/pen/qdwGXa

<ol>
<li class="odd">Lorem ipsum dolor sit amet, consectetur ...</li>
<li class="even">Some more text</li>
</ol>

这里是CSS部分

li.odd{
    background-color: #FF851B;
}
li.even{
    background-color: #FF4136;
}