如何获得第二行（第三行等）的缩进，以使用CSS使用自定义编号匹配列表中的第一行？

Question

I'm new to HTML, CSS and JavaScript, so this may be a very basic problem, however, I haven't been able to find a solution by searching. Most solutions I've found deal with automatically numbered lists, or un-ordered lists.

I'm using Javascript to populate a list on a webpage from a JSON document. The output HTML list looks like this:

<article>
    <div>
        <ul class='foo'><li class='num'>1.</li><li class='txt'>bar</li></ul>
        <ul class='foo'><li class='num'>2.</li><li class='txt'>foo</li></ul>
        <ul class='foo'><li class='num'>2a.</li><li class='txt'>very long test here so that it moves to a new line on the webpage</li></ul>
        <ul class='foo'><li class='num'>5.</li><li class='txt'>bar</li></ul>
        <ul class='foo'><li class='num'>6.</li><li class='txt'>foo</li></ul>
    </div>
</article>

I then use CSS to style these to look like a single list:

.foo li{
    display: inline;
    padding-left: 20px;
}

This shows the generated numbers with the text to the right, however, if the text is long, like in the third ul in the example above, it loses all indentation when it moves down to a new line. Also, if one number is longer than another, the text to the right of it is indented by the same amount extra, but I'd like to have each line of text start in line with the text above and below it.

I've tried floating each list left and right, but that wrecked the formatting I had on the page. I'm sure there's some simple way to overcome this, but any search I've made has been related to automatically generated numbers for ol objects.

How do I keep my own list numbering, but control the consistency of indentation over multiple lines?

Answer 1

The easiest way to prevent this is to simply give the list element display: table-cell :

 .foo li { display: table-cell; padding-left: 20px; } 

 <article> <div> <ul class='foo'> <li class='num'>1.</li> <li class='txt'>bar</li> </ul> <ul class='foo'> <li class='num'>2.</li> <li class='txt'>foo</li> </ul> <ul class='foo'> <li class='num'>2a.</li> <li class='txt'>very long test here so that it moves to a new line on the webpage</li> </ul> <ul class='foo'> <li class='num'>5.</li> <li class='txt'>bar</li> </ul> <ul class='foo'> <li class='num'>6.</li> <li class='txt'>foo</li> </ul> </div> </article> 

Alternatively, you could make use of display: flex on the parent and display: inline-flex on the list element:

 .foo { display: flex; } .foo li { display: inline-flex; padding-left: 20px; } 

 <article> <div> <ul class='foo'> <li class='num'>1.</li> <li class='txt'>bar</li> </ul> <ul class='foo'> <li class='num'>2.</li> <li class='txt'>foo</li> </ul> <ul class='foo'> <li class='num'>2a.</li> <li class='txt'>very long test here so that it moves to a new line on the webpage</li> </ul> <ul class='foo'> <li class='num'>5.</li> <li class='txt'>bar</li> </ul> <ul class='foo'> <li class='num'>6.</li> <li class='txt'>foo</li> </ul> </div> </article> 

If you want to get the text 'fully' in line, you'll want to give margin-left: -8px to the element that has the additional letter in the numbering:

 .foo { display: flex; } .foo li { display: inline-flex; padding-left: 20px; } .foo .long { margin-left: -8px; } 

 <article> <div> <ul class='foo'> <li class='num'>1.</li> <li class='txt'>bar</li> </ul> <ul class='foo'> <li class='num'>2.</li> <li class='txt'>foo</li> </ul> <ul class='foo'> <li class='num'>2a.</li> <li class='txt long'>very long test here so that it moves to a new line on the webpage</li> </ul> <ul class='foo'> <li class='num'>5.</li> <li class='txt'>bar</li> </ul> <ul class='foo'> <li class='num'>6.</li> <li class='txt'>foo</li> </ul> </div> </article> 

Having said all that, the 'best' way to handle this would be to only use one <ul> and make use of list-style-type: decimal . This way the indentation lines up, and your numbering is handled for you automatically:

 .foo li { list-style-type: decimal; padding-left: 20px; } 

 <article> <div> <ul class='foo'> <li>bar</li> <li>foo</li> <li>very long test here so that it moves to a new line on the webpage</li> <li>bar</li> <li>foo</li> </ul> </div> </article> 

This can even be extended to have sub-lists to cover the Roman lettering, offset with a negative margin-left :

 .foo li { list-style-type: decimal; padding-left: 20px; } .foo li ul li { list-style-type: lower-alpha; margin-left: -40px; } 

 <article> <div> <ul class='foo'> <li>bar</li> <li>foo</li> <li>foo <ul> <li>very long test here so that it moves to a new line on the webpage</li> </ul> </li> <li>bar</li> <li>foo</li> </ul> </div> </article> 

Answer 2

You could render your list as a table:

ul.foo {
     display: table;
}
ul.foo > li {
    display: table-cell;
}
ul.foo > li.num {
    min-width: 40px;
}

Demo: http://jsfiddle.net/xbsp30kd/1/

Answer 3

ul tag should be used only once it should be something like this

    <ul>
    <li>Items</li>
    <li>Items</li>
    <li>Items</li>
    </ul>

you kept on repeating your ul tags and for the custom indexing, you could use span tags instead of using another li tag