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 を次に示します。理想的には、リスト番号が 1 桁以上の長さになった場合でも機能する回答が欲しいのですが、番号が右側に並んでいる場合はなおさらです。

 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 に答える