Question

我想在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.

Here's a JSFiddle showing the problem。理想情况下，即使列表编号长度超过一位数，我也希望得到一个有效的答案，如果数字排在右边，那就更好了：

 9. Foo
10. Bar

谢谢！

Answer 1

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

JSFiddle Demo

ol li {
    list-style: none;
    position:relative;
    padding-left:16px;
}
ol li:before {
    content: counters(item, ".")". ";
    counter-increment: item;
    position:absolute;
    left:-16px;
}

Answer 2

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

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

Documentation

JS Fiddle

Answer 3

你这样做太复杂了。只需将所有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/

在HTML中获取悬挂缩进和Word样式的混合数字/字母列表

3 个答案: