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

Question

我有一个有序列表

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

看起来像这样：

    
1. Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。 Ut enim ad minim veniam，quis
    
2. 更多文字

我希望列表具有列表位置：外部所以数字突出（就像他们在此页面上所做的那样）但是每个列表项的背景（替代）也包括数字。

Answer 1

正如“外部”名称所示，数字被放置在元素之外，因此您不能使用li的背景颜色来影响它们。解决方法可能是使用li中的附加div：

<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值）。

Answer 2

而不是使用外部，你可以使用list-position：inside，设置背景，然后使用负左边距将其推出？

Answer 3

尝试的一个选项是text-indent，例如

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

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

Answer 4

display: block;

这是一个展示如何设置列表项样式的codepen： http://codepen.io/anon/pen/qdwGXa

Answer 5

这是你的身体部位

<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;
}