Question

我想仅使用 HTML5 和 CSS 创建这样的列表：

1 First
  1.1 Indent 1
  1.2 Indent 2
2 Second
  2.1 Indent 1
  2.2 Indent 2
    2.2.1 More depth

我已经检查了有序列表上的多个教程，但似乎<ol>标记没有选项可以执行此操作。是否可以使用 HTML5 和 CSS ？

Answer 1

您可以使用before伪元素来实现：

<强> HTML

<ul class="numeric">
<li>First
    <ul>
        <li>Indent </li>
        <li>Indent </li>
    </ul>
</li>
<li>Second
    <ul>
        <li>Indent</li>
        <li>Indent</li>
    </ul>
</li>
<li>Third
        <ul>
            <li>Indent</li>
            <li>Indent</li>
            <li>Indent</li>
            <li>Indent</li>
        </ul>
    </li>
<li>Fourth
    <ul>
        <li>Indent</li>
        <li>Indent</li>
    </ul>
</li>
<li>Five</li>

<强> CSS

ul.numeric { counter-reset:section; list-style-type:none; }
ul.numeric li { list-style-type:none; }
ul.numeric li ul { counter-reset:subsection; }
ul.numeric li:before{
    counter-increment:section;
    content:counter(section) ". ";
}
ul.numeric li ul li:before {
    counter-increment:subsection;
    content:counter(section) "." counter(subsection) " ";
}

fiddle

<强>参考文献：

CSS counter-reset Property

有没有办法只使用HTML5和CSS创建这样的多级列表？

1 个答案: