1

我想在 HTML 中生成一个如下所示的列表：

1. Top level element
    a. Nested list item
        i. Even a third level!
    b. Another nested item
    c. A third nested item
2. Second top level element

默认情况下，HTML 将为每个级别使用数字，所以我会得到这样的结果：

1. Top level element
    1. Nested list item
        1. Even a third level!
...

我已经设法将弗兰肯斯坦放在一起几乎可以与其他答案一起使用的 CSS 样式表：

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

问题是我没有得到悬挂缩进。我想：

1. Imagine that this is a really long
   line that gets wrapped.

但我得到：

   1. Imagine that this is a really long
   line that gets wrapped.

这是一个显示问题的 JSFiddle。理想情况下，即使列表编号超过一位数，我也想要一个有效的答案，如果数字在右侧排列则更好：

 9. Foo
10. Bar

谢谢！

4

3 回答 3

2

由于您已经在使用伪元素，因此您可以定位它们。

JSFiddle 演示

ol li {
    list-style: none;
    position:relative;
    padding-left:16px;
}
ol li:before {
    content: counters(item, ".")". ";
    counter-increment: item;
    position:absolute;
    left:-16px;
}
于 2013-10-18T18:50:03.953 回答
1

你把这种方法弄得太复杂了。只需将所有 CSS 更改为此。“悬挂缩进”和按您想要的方式排列的数字都是列表的默认属性。您要做的就是更改样式类型。

ol {list-style-type:decimal;}
ol ol {list-style-type:lower-alpha;}
ol ol ol {list-style-type:lower-roman;}

http://jsfiddle.net/rS7Y8/2/

于 2013-10-18T18:42:05.780 回答
1

对于悬挂缩进，您希望使用带有负值的 text-indent 属性：

ol li {
  list-style: none;
  text-indent: -1.5em;
}

文档

JS小提琴

于 2013-10-18T18:35:45.427 回答