如何自定义无序列表位置? [英] How to customize unordered lists position?

问题描述

我正在努力设计一个简单的有序列表以使其看起来像这样:

I'm struggling with styling a simple ordered list to look this:

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

The HTML must be standard html like:

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

我已经尝试了多种方式使用list-style-position:内部，文本缩进等，但是我似乎无法使其完美.包装时，我需要在背景色内输入正确的数字，并正确对齐文本.并且还要在数字和文本之间留一些空间.甚至有可能吗?

I've tried a bunch of different ways with list-style-position: inside, text-indent, etc... but I can't seem to make it perfect. I need to have the number inside the background color and the text lined up correctly when wrapping. And also would like some space between the number and the text. Is it even possible?

推荐答案

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

This should do it, the idea is displaying the counter as absolute positioned pseudo content.

JsFiddle示例

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>

这篇关于如何自定义无序列表位置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！