css - 如何自定义无序列表的位置？

Question

我正在努力设计一个简单的有序列表，让它看起来像这样:

HTML 必须是标准的 html，例如:

<ol>
    <li>asdf asdf</li>
    <li>asdfasdfasdf</li>
    <li>asdfasdf</li>
    <li>asdf...</li>
</ol>

我已经尝试了很多不同的方式来处理 list-style-position:inside，text-indent，等等……但我似乎无法做到完美。我需要在背景颜色内包含数字，并且在换行时文本正确排列。并且还希望数字和文本之间有一些空间。有可能吗？

Answer 1

应该这样做，想法是将计数器显示为绝对定位的伪内容。

JsFiddle Example

ol {
    list-style: none;
    padding: 0;
    margin: 0;
}
ol li {
    counter-increment: step-counter;
    background: lightgreen;
    padding: 20px 20px 20px 50px;
    margin-bottom: 8px;
    position: relative;
}
ol li:before {
    content: counter(step-counter) ".";
    position: absolute;
    left: 20px;
}

<ol>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
</ol>