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

1有一个有序列表如何1个添加背景颜色列表中的项目

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

看起来是这样的：

Lorem存有胡萝卜，增强回扣，但他们做的劳动和疼痛，活力，从而使，与一些伟大的长期eiusmod。多年来来，谁
一些文字

1想要列表具有列表位置：外部，数量过剩（因为他们做此页面上），但有每个列表项的背景（其候补）覆盖数为好。

来源

2010-07-27 Gazzer

你是什么意思“因为他们此页面上做”？ – Gavrisimo 2010-07-27 10:32:44

StackOverflow上本身的数量过剩。在长文本不走一（1）项下，但LOREM下进入。 – Gazzer 2010-07-27 10:35:51

由于“外部”顾名思义，号被放在元素之外，所以你不能与李的背景颜色会影响他们。对于此解决办法可能是使用LI内的额外的div：

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

然后添加以下CSS的DIV：

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

这将移动格数下出现（这是-20px值），并在其文本回到正确的位置（即20像素值）。

来源

2010-07-27 10:46:28

这似乎运作良好。 – Gazzer 2010-07-27 11:05:06

在我的情况，“宽度：100％;高度：100％;从正常工作'防止这一点。 – 2017-10-25 19:42:56

而不是使用外，你可以用列表的位置：内，设置背景，然后用阴性切缘左推一下吗？

来源

2010-07-27 10:33:42 second

列表样式位置：外产生的过剩。注意文本（不是数字）如何在左边垂直对齐方式。随着“内部”数字本身下的文本流。 – Gazzer 2010-07-27 10:42:00

一种选择是尝试text-indent，例如

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

1've使用负文本缩进的文本的第一行拉出，然后离开填充拉一切回到对准。您可能需要使用文本缩进和填充值打了一下。 1've只用单位数此列表项的测试。

来源

2010-07-27 10:59:52

1试过这种方法，但不幸的是它意味着第一个字（LOREM ......）不与第二行文字正确对齐。即这是不是一个真正的过剩。像1 – Gazzer 2010-07-27 11:06:31

说，你可能需要惹文本缩进值有点:)它在这里工作，但是它依赖于其他事情，包括字体大小的负荷。 – 2010-07-27 11:29:16

display: block;

这里有一个codepen演示了如何样式列表项 http://codepen.io/anon/pen/qdwGXa

来源

2015-08-15 02:49:12 terribleuser

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

回答

相关问题