有序列表问题：如何为有序列表中的每个li添加背景颜色？

Question

如何在背景颜色中移动数字，如上图所示？

有人能告诉我一个有效的例子吗？

JS fiddle

CSS

goals-list1 {
    padding-left:10px
}
.goals-list1 ol {
    border:0px solid red;
    padding:0;
    margin:0;
}
.goals-list1 ul {
    border:0px solid red;
    margin:0;
    padding:0;
}
.goals-list1 li {
    border:0px solid blue;
    color:#666666;
}
.goals-list1 .pink {
    color:#FF1493;
}
.goals-list1 .violet {
    color:#9400D3;
}
.goals-list1 .orange {
    color:#FFA500;
}
ol .goals-info {
    ;
    background-color:#f4f4f4;
    border-radius:10px;
    padding:5px;
}

HTML

<ol  class="goals-list1">
    <li class="pink goals-info">
        <ul class="list-unstyled">
            <li>Lifestyle</li>
            <li>son</li>
            <li>Inflation</li>
            <li>Aug 2012</li>
        </ul>
    </li>
    <li class="pink goals-info">
        <ul class="list-unstyled ">
            <li>Lifestyle</li>
            <li>son</li>
            <li>Inflation</li>
            <li>Aug 2012</li>
        </ul>
    </li>
</ol>

Answer 1

您可以使用

ol {list-style-position: inside;}

但之后会有一些额外的重新调整ul的填充等。

Answer 2

为ol元素本身添加背景颜色：

.goals-list1 ol{background-color:blue;}