Question

I need to indent an ordered list to keep the parent list items numbering:

What I have:

 // My code:
 <ol>
      <li>Item 1</li>
      <li>
           Item 2
           <ol>
                <li>Item 2.1</li>
                <li>Item 2.2</li>
           </ol>
      </li>
      <li>Item 3</li>
 </ol>

And so forth.

What i’m getting as a result now is:

      // Result:
      1. Item 1
      2. Item 2
           Item 1
           Item 2
      3. Item 3

What i’m looking for is:

      // Looking for:
      1. Item 1
      2. Item 2
           2.1 Item 2.1
           2.2. Item 2.2
      3. Item 3

Any ideas?

Answer 1

You can use counters to do so:

OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }