css - 像 Ms Word 一样使用 HTML 或 CSS 设置缩进样式

Question

我需要帮助来获得 a., b. 样式的内部缩进，而不是 2.2.1., 2.2.2.。从 HTML ordered list indent to keep original numbering 找到原始 CSS 代码

我的代码:

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

<ol>
    <li>One</li>
    <li>
        Two
        <ol>
            <li>Two one</li>
            <li>
                Two two
                <ol type="a">
                    <li>Two two a</li>
                    <li>Two two b</li>
                </ol>
            </li>
            <li>Two three</li>
        </ol>
    </li>
    <li>Three</li>
</ol>

我得到了什么:

1. One
2. Two
   2.1. Two one
   2.2. Two two
      2.2.1. Two two a
      2.2.2. Two two b
   2.3. Two three
3. Three

我需要什么:

1. One
2. Two
   2.1. Two one
   2.2. Two two
      a. Two two a
      b. Two two b
   2.3. Two three
3. Three

Answer 1

由于您不需要在内部列表中添加节编号，您可以使用 counter 添加额外的规则来获取字母:

ol {
    counter-reset: item;
}
li {
    list-style: none;
}
li:before {
    content: counters(item, ".")". ";
    counter-increment: item
}
ol ol ol li:before {
    content: counter(item, lower-alpha)". ";
}

详情:http://jsfiddle.net/kmAJ6/3/ .应与您现有的 HTML 一起使用。