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

Posted 2023-05-07

【中文标题】如何为列表中的项目添加背景颜色

【英文标题】：How do I add background color to items in a list

【发布时间】：2011-03-21 12:50:00

【问题描述】：

我有一个有序列表

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

看起来像这样：

Lo​​rem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。 Ut enim ad minim veniam, quis 还有一些文字

我希望列表具有 list-position: outside 以便数字悬垂（就像在此页面上所做的那样），但每个列表项的背景（交替）也覆盖数字。

【问题讨论】：

“就像他们在这个页面上所做的那样”是什么意思？

在 *** 本身上，数字悬而未决。第一项中的长文本不在 (1) 之下，而是在 Lorem 之下。

【参考方案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 值）。

【讨论】：

就我而言，width: 100%; height: 100%; 阻止了它正常工作。

【参考方案2】：

可以不使用outside，而是使用list-position: inside，设置背景，然后使用负的左边距将其推出？

【讨论】：

list-style-position: outside 创建悬垂。注意文本（不是数字）是如何垂直左对齐的。使用“内部”，文本在数字本身下方流动。

【参考方案3】：

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

li 
    list-style-position: inside;
    text-indent: -1em;
    padding: 10px 2em;
    background-color: lime;

li.odd 
    background-color: aqua;

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

【讨论】：

我尝试了这种方法，但不幸的是，这意味着第一个单词 (Lorem ... ) 与第二行的文本没有正确对齐。也就是说，这不是一个真正的悬垂。

就像我说的那样，您可能需要稍微弄乱 text-indent 值 :) 它在这里工作，但它取决于包括字体大小在内的其他内容。

【参考方案4】：

display: block;

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

【参考方案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;