☰

CSS で順序付きリストの 2 行目のインデントを維持するにはどうすればよいでしょうか? 質問する

tag-icon • tag-icon html css html-lists
CSS で順序付きリストの 2 行目のインデントを維持するにはどうすればよいでしょうか? 質問する

リストの箇条書きまたは小数点がすべて上位のテキスト ブロックと揃う「内部」リストを作成したいと考えています。リスト エントリの 2 行目は、最初の行と同じインデントにする必要があります。

例えば：

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Aenean commodo ligula eget dolor. Aenean Aenean massa. 
Cum sociis natoque penatibus et magnis dis parturient montes, 
nascetur ridiculus mus. Donec quam felis,

1. Text
2. Text
3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
   second line of longer Text
4. Text

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Aenean commodo ligula eget dolor.

CSS は、"list-style-position" に inside と outside の 2 つの値のみを提供します。"inside" の場合、2 番目の行は上位の行ではなくリスト ポイントと同じ高さになります。

3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
second line of longer Text
4. Text

リストの「外側」の幅が、上位のテキスト ブロックと揃わなくなりました。

実験 width text-indent、padding-left、margin-left は順序なしリストでは機能しますが、リストの小数点の文字数に依存するため、順序ありリストでは機能しません。

 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
 Aenean commodo ligula eget dolor. 

 3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
    second line of longer Text
 4. Text
11. Text
12. Text

「11.」と「12.」は、「3.」と「4.」と比べて上位のテキスト ブロックと面一になっていません。

では、順序付きリストと 2 行目のインデントの秘密はどこにあるのでしょうか? ご尽力に感謝いたします。

ベストアンサー1

アップデート

この回答は古くなっています。以下の別の回答で指摘されているように、これをもっと簡単に行うことができます。

ul {
  list-style-position: outside;
}

見るhttps://www.w3schools.com/cssref/pr_list-style-position.asp

元の回答

これがまだ解決されていないことに驚きました。次のように、ブラウザのテーブル レイアウト アルゴリズム (テーブルを使用せずに) を利用できます。

ol {
    counter-reset: foo;
    display: table;
}

ol > li {
    counter-increment: foo;
    display: table-row;
}

ol > li::before {
    content: counter(foo) ".";
    display: table-cell; /* aha! */
    text-align: right;
}

デモ：http://jsfiddle.net/4rnNK/1/

ここに画像の説明を入力してください

IE8 で動作させるには、:beforeコロンを 1 つ付けた従来の表記法を使用します。

おすすめ記事