首页 文章

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

提问于
浏览 次
4

我有一个有序的清单

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

看起来像这样：

  • 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

  • 更多文字

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

html css

5 回答

  • 0

    你可以使用list-position：inside，设置背景，然后使用负左边距来推出它吗？

    回复于
  • 2

    这是你的身体部位

    <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;
}
    回复于
  • 0

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

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

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

    回复于
  • 2

    正如“外部”名称所示，数字被放置在元素之外，因此您不能使用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值） .

    回复于
  • 3
    display: block;

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

    回复于

相关问题