如何调整CSS中嵌套列表的编号

时间:2017-06-22 07:52:34

标签: html css sass

我想在ol内创建包含列表项的嵌套有序列表li

1.  Lorem ipsum
1.1 Lorem ipsum
10.1.1  Lorem ipsumLorem ipsum
10.1.2  Lorem ipsum
10.1.3  Lorem ipsum
10.2    Lorem ipsum

我尝试了这个scss(在stackoverflow上找到),但遗憾的是我预期10.2我得到了10.1.4



ol {
  counter-reset: item;
}

ol>li {
  counter-increment: item;
}

ol ol>li {
  display: block;
}

ol ol>li:before {
  content: counters(item, ".") " ";
  margin-left: -20px;
}

ol ol ol>li:before {
  content: counters(item, ".") " ";
  margin-left: -20px;
}

<ol>
  <li>
    <h2>Personal information</h2>
    <ol>
      <li></li>
      <ol>
        <li></li>
        <li></li>
        <li></li>
      </ol>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
</ol>
&#13;
&#13;
&#13;

您可以在此处https://jsfiddle.net/bqw457ef/

查看问题

2 个答案:

答案 0 :(得分:2)

您关闭第二级的<li>太快了。第三级完成后关闭它。

&#13;
&#13;
ol {
  counter-reset: item;
}

ol>li {
  counter-increment: item;
}

ol ol>li {
  display: block;
}

ol ol>li:before {
  content: counters(item, ".") " ";
  margin-left: -20px;
}

ol ol ol>li:before {
  content: counters(item, ".") " ";
  margin-left: -20px;
}
&#13;
<ol>
  <li>
    <h2>Personal information</h2>
    <ol>
      <li>
        <ol>
          <li></li>
          <li></li>
          <li></li>
        </ol>
      </li>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
</ol>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

这就是你需要的。下面是代码。更新ol > li

的规则

ol {
  counter-reset: item;
}

ol > li {
  counter-increment: item;
  content: counters(item, ".");
}

ol ol > li {
  display: block;
}

ol ol > li:before {
  content: counters(item, ".") " ";
  margin-left: -20px;
}

ol ol ol > li:before {
  content: counters(item, ".") " ";
  margin-left: -20px;
}
<ol>
  <li>Lorem
    <ol>
      <li>Lorem ipsum
        <ol>
          <li>Lorem ipsum dolor
          </li>
          <li>sit amet, consectetur
          </li>
          <li>adipiscing elit, sed
          </li>
        </ol>
      </li>
      <li>dolor sit</li>
    </ol>
  </li>
</ol>