How to customize unordered lists position?

问题

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

The HTML must be standard html like:

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

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?

回答1:

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

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>

回答2:

You have to style it like this:

Css:

ol{
    list-style-position: inside;
    padding:0; 
    margin:0;
}
li{
    margin:0 0 5px;
    border:2px solid white;        
    background:yellow;
    padding:20px;
    width:500px;
    height:30px;
}

html:

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

http://jsfiddle.net/u4rqyo4L/3/

来源：https://stackoverflow.com/questions/31644035/how-to-customize-unordered-lists-position

标签

css

html-lists