css - 有序列表问题 :How to add background color to each li in the ordered list?

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 的填充等会有一些额外的调整。