且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2022-12-14 23:07:35

正如外部名称所暗示的那样,这些数字放置在元素外部,因此您无法通过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).