div中的HTML有序列表

Question

我用子项目格式化了有序列表。 <ol>中有另一个<div>，并且数字有误；为什么？

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>

请检查以下内容： http://jsfiddle.net/PTbGc/1265/

Answer 1

您可以为此使用单独的div标签。检查此片段

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>

Answer 2

您可以使用单独的div标签

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>