3

我需要为遵循这种格式的有序列表创建一个样式：

(a)    List Item 1
(b)    List Item 2
    (1)    List Item 2.1
    (2)    List Item 2.2
        (i)    List Item 2.2.1
        (ii)   List Item 2.2.2

不幸的是，list-style-type这不起作用，因为没有选项显示上面列出的数字，带括号。

大量研究只带来了丑陋的黑客攻击，例如：

ol {
    list-style-type: none;
}

ol>li:before {
    content: "(" counter(lvl1, lower-alpha) ") ";
}

ol li {
    counter-increment: lvl1;
}

ol ol>li:before {
    content: "(" counter(lvl2, decimal) ") ";
}

ol ol>li {
    counter-increment: lvl2;
}

ol ol ol>li:before {
    content: "(" counter(lvl3, lower-roman) ") ";
}

ol ol ol>li {
    counter-increment: lvl3;
}

这在某种程度上有效，删除列表编号list-style-type: none;并在li. 这使得修改其他相关样式变得可怕，因为我无法弄清楚如何很好地排列事物等（我认为它甚至不可能）。它也变得list-style-position多余，因为数字总是在li.

基本上，我正在寻找一种在 CSS 中重现这种列表编号的方法：（注意文本对齐等）

列表编号示例

非常感谢任何帮助！

4

1 回答 1

1

您快到了。

由于您要删除list-style，因此您可以通过对列表项应用填充然后将计数器以负边距（或许多类似技术之一，例如悬挂缩进）拉入该填充来恢复计数器的位置

li {
    padding: 2em;
}

li:before {
    /* Take counter out of flow and pull it into padding space */
    float: left;
    margin-left: -2em;
}

您还需要在counter-reset每个ol嵌套级别的混合物中撒一些。

JSFiddle 在这里展示了一个包含所有嵌套代码的完整工作示例：http: //jsfiddle.net/thefrontender/tzzbh/2/

于 2013-05-08T05:55:10.363 回答