Question

我在HTML文件中使用ol>li，为其添加样式以使用1,1,11,1.2,1.2.1等分层编号。有时它的工作非常精细，但有时编号会变得混乱。它不是以下一个数字开头，而是继续相同的层次结构。请参阅附件中的图片instead of using number 3, the numbering continues as 2.6 and then uses 2.6.1 and so on

这是我的css -

ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0
}
ol>li {
  display: table;
  counter-increment: item;
  margin-bottom: .6em
}
ol>li:before {
  content: counters(item, ".") ". ";
  display: table-cell;
  padding-right: .3em;
  font-size: 14px;
}
li ol>li {
  margin: 0
}
li ol>li:before {
  content: counters(item, ".") " "
}
li ol>li:before {
  content: counters(item, ".") " ";
  font-size: small
}

<ol>
    <li>List Item 1
        <ol>
            <li>Indented List Item 1</li>
            <li>Indented List Item 2</li>
            <li>Indented List Item 3</li>
        </ol>
    </li>
    <li>List Item 2
        <ol>
            <li>Indented List Item 1</li>
            <li>Indented List Item 2</li>
            <li>Indented List Item 3</li>
        </ol>
    </li>
    <li>List Item 3
        <ol>
            <li>Indented List Item 1</li>
            <li>Indented List Item 2</li>
            <li>Indented List Item 3</li>
        </ol>
    </li>
    <li>List Item 4
        <ol>
            <li>Indented List Item 1</li>
            <li>Indented List Item 2</li>
            <li>Indented List Item 3</li>
        </ol>
    </li>
</ol>

Answer 1

这是干净的代码

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

 <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</li>
    <ol>
     <li>three.two.one</li>
     <li>three.two.two</li>
    </ol>
   </ol>
     </li> 
  <li>
  four
  <ol>
     <li>Four.one</li>
     <li>Four.two</li>
    </ol>
  </li>
  </ol>

ol＆gt; li编号变得凌乱

1 个答案: