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。

Answer 2

您的type属性无效，因为您的css会替换默认编号。解决此问题的一种方法是更新您的css规则，仅针对前2个级别，让第3级使用默认编号。这样，您的type属性就会生效。

http://jsfiddle.net/TbjcV/

.level1,
.level2{ 
    counter-reset: item 
}

.level1 > li,
.level2 > li{ 
    display: block 
}
.level1 > li:before,
.level2 > li:before{ 
    content: counters(item, ".") ". "; 
    counter-increment: item 
}

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

Answer 3

我明白了：

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

HTML：

<ol class="cnt">
    <li>One</li>
    <li>
        Two
        <ol class="cnt">
            <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>

有点凌乱，但似乎有效。

像Ms Word中的HTML或CSS样式缩进

3 个答案: