HTML ordered list inside div

Question

I formatted the ordered list with sub-items. Another <ol> is inside a <div> and the numbers are wrong; why?

OL {
  counter-reset: item;
  padding-left: 10px;
}

LI {
  display: list-item
}

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

<ol>
  <li>one</li>
  <li>two
    <ol>
      <li>two.one</li>
    </ol>
  </li>
</ol>

<hr />
<div>
  <ol>
    <li>one
      <ol>
        <li>one.one</li>
      </ol>
    </li>
  </ol>
</div>

Please check this: http://jsfiddle.net/PTbGc/1265/

have you ever check that? [Html ordered list 1.1, 1.2 (Nested counters and scope) not working](https://stackoverflow.com/questions/10405945/html-ordered-list-1-1-1-2-nested-counters-and-scope-not-working) — uedemir, Sep 18 '18 at 11:36
@uedemir that is not the same problem, the issue in that question is caused by invalid html in the nesting of one list, the problem with this question is that the second separate list is continuing from 2 instead of starting again from 1 — Pete, Sep 18 '18 at 12:20
Thanks @Pete, you saw it, also its not answered, not duplicate. — mMo, Sep 18 '18 at 12:28
@mMo see the new duplicate I have linked to - that is you issue — Pete, Sep 18 '18 at 12:31
@Pete yes, thats it, thanks, that works and i understand now — mMo, Sep 18 '18 at 12:50

score 1 · Answer 1 · answered Sep 18 '18 at 11:41

You can use separate div tag for that. Check this snippets

OL {
  counter-reset: item;
  padding-left: 10px;
}

LI {
  display: list-item
}

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

    <div>
    <ol>
      <li>one</li>
      <li>two
        <ol>
          <li>two.one</li>
        </ol>
      </li>
    </ol>
    </div>


    <hr />
    <div>
      <ol>
        <li>one
          <ol>
            <li>one.one</li>
          </ol>
        </li>
      </ol>
    </div>

score 0 · Answer 2 · answered Sep 18 '18 at 11:52

you can use separate div tags

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

 <div>
<ol>
  <li>one</li>
  <li>two
    <ol>
      <li>two.one</li>
      <li>two.two</li>
      <li>two.three</li>
    </ol>
  </li>
  <li>three
    <ol>
      <li>three.one</li>
      <li>three.two
        <ol>
          <li>three.two.one</li>
          <li>three.two.two</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>four</li>
</ol>
 <div>

HTML ordered list inside div

2 Answers2