如何为列表中的项目添加背景颜色 [英] How do I add background color to items in a list

问题描述

我有一个有序列表

I have an ordered list

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

看起来像这样：

To look something like this:

1. Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。您好！


2. 更多文字

我希望列表拥有list-position：outside所以数字悬而未决（就像他们在这个页面上做的那样），但是每个列表项目的背景（替代）都包含数字。

I want the list to have list-position: outside so the numbers overhang (as they do on this page) but have the background of each list item (which alternate) cover the numbers as well.

推荐答案

正如外部名称所暗示的那样，这些数字放置在元素外部，因此您无法通过li的背景色来影响它们。解决方法是在li中使用额外的div：

As the "outside" name suggests, the numbers are placed outside the element so you cannot affect them with li's background color. A workaround for this may be using an additional div inside the li:

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

然后为div添加以下CSS：

Then add the following CSS for the div:

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

这会将div移动到数字的下方（即-20px值）和文本回到正确的地方（即20px的值）。

This will move the div to appear under the number (that's the -20px value) and the text in it back to the right place (that 20px value).

这篇关于如何为列表中的项目添加背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！