web-dev-qa-db-ja.com

CSSで番号付きリストの2行目をインデントするにはどうすればいいですか？

リストの箇条書きまたは10進数の数字がすべて優れたテキストブロックと一致する「内部」リストを作成したいです。リストエントリの2行目は、1行目と同じインデントを持つ必要があります。

例:

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"に対して、内側と外側の2つの値のみを提供します。 "inside"で2行目は、上位行ではなくリストポイントと同じ高さになります。

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

私のリストの「外側」の幅が、優れたテキストブロックと一致しなくなりました。

実験的なtext-indent、padding-left、およびmargin-leftは、番号なしリストでは機能しますが、リスト10進数の文字数に依存するため、番号付きリストでは失敗します。

 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」と比較して優れたテキストブロックと同じ高さではありません。そして「４」。

それでは、順序付きリストと2行目のインデントについての秘密はどこにありますか？お疲れ様でした！

htmlcsshtml-lists
231
kernfrucht

更新

この答えは古くなっています。これがまだ解決されていないのを見て私は驚いて指摘したように、あなたはもっと簡単にこれを行うことができます。ブラウザのテーブルレイアウトアルゴリズムを（テーブルを使わずに）使うことができます。

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/

enter image description here

IE8で機能させるには、コロンを1つ使用して従来の:before表記法を使用します。

237
user123444555621

私はこれがあなたが探していることをすると信じています。

.cssClass li {
    list-style-type: disc;
    list-style-position: inside;
    text-indent: -1em;
    padding-left: 1em;
}

JSFiddle： https://jsfiddle.net/dzbos70f/

enter image description here

203
JTOrlando

最も簡単でわかりやすい方法は、ハックなしで、次のように単にul（またはol）をインデントすることです。

ol {
  padding-left: 40px;
  list-style-position: outside;
}

これは承認された答えと同じ結果になります。 https://jsfiddle.net/af2fqryz/

スクリーンショット

enter image description here

34
Chuck Le Butt

このフィドルをチェックしてください。

http://jsfiddle.net/K6bLp/

CSSを使用してulとolを手動でインデントする方法を示します。

HTML

<head>
    <title>Lines</title>
</head>

<body>
    <ol type="1" style="list-style-position:inside;">
        <li>Text</li>
        <li>Text</li>
        <li >longer Text, longer Text, longer Text, longer Text    second line of longer Text        </li>
    </ol>  
    <br/>
    <ul>
        <li>Text</li>
        <li>Text</li>
        <li>longer Text, longer Text, longer Text, longer Text    second line of longer Text                </li>
    </ul>
</body>

CSS

ol 
{
    margin:0px;
    padding-left:15px;
}

ol li 
{
    margin: 0px;
    padding: 0px;
    text-indent: -1em;
    margin-left: 1em;
}

ul
{
    margin:0;
    padding-left:30px;
}

ul li 
{
    margin: 0px;
    padding: 0px;
    text-indent: 0.5em;
    margin-left: -0.5em;
}

あなたのフィドルも編集しました

http://jsfiddle.net/j7MEd/3/

それを書き留めます。

25
Deepan Babu

CSSでolとulのどちらかのマージンとパディングを設定できます

ol {
margin-left: 0;
padding-left: 3em;
list-style-position: outside;
}
9
luke2012

リストの「箇条書き」をパディングの外側に置くだけでよいと思います。

li {
    list-style-position: outside;
    padding-left: 1em;
}
6
KnownColor

CSSを使用して範囲を選択できます。この場合、リスト項目1〜9が必要です。

ol li:nth-child(n+1):nth-child(-n+9)

次に、これらの最初の項目の余白を適切に調整します。

ol li:nth-child(n+1):nth-child(-n+9) { margin-left: .55em; }
ol li:nth-child(n+1):nth-child(-n+9) em,
ol li:nth-child(n+1):nth-child(-n+9) span { margin-left: 19px; }

ここで実際にそれを参照してください。 http://www.wortfm.org/wort-madison-charts-for-the-week-beginning-11192012/

4
LaFaucon

私の解決策は Pumbaa80 のものとまったく同じですが、li要素にはdisplay: tableの代わりにdisplay:table-rowを使うことをお勧めします。だからそれはこのようなものになります：

ol {
    counter-reset: foo; /* default display:list-item */
}

ol > li {
    counter-increment: foo;
    display: table; /* instead of table-row */
}

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

それで今liの間の間隔にマージンを使うことができます

3
Alex

私はこの解決策が大好きです。

ul {
    list-style-position: inside;
    list-style-type: disc;
    font-size: 12px;
    line-height: 1.4em;
    padding: 0 1em;
}

ul li {
    margin: 0 0 0 1em;
    padding: 0 0 0 1em;
    text-indent: -2em;
}
1
Corey Ballou

次のCSSがうまくいきました。

ul{
    margin-left: 1em;
}

li{
    list-style-position: outside;
    padding-left: 0.5em;
}
1
itoctopus

Ol、ulリストは、ボーダ付きのテーブルを使用することもできます（CSSではnone）。

0
Casualbot

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

順序付きリストでは、介入なしに "list-style-position"に値 "inside"を指定した場合、長いリスト項目の2行目はインデントを持たず、リストの左端に戻ります（つまり、アイテムの番号と左揃えになります。これは番号付きリストに固有のもので、番号なしリストでは発生しません。

代わりに "list-style-position"に値 "outside"を指定した場合、2行目は1行目と同じインデントになります。

私は国境のあるリストを持っていてこの問題を抱えていた。 "list-style-position"を "inside"に設定すると、私のリストは望んでいたようには見えませんでした。しかし、 "list-style-position"を "outside"に設定すると、リスト項目の数はボックスの外側になりました。

私はこれを解決するために、リスト全体の左マージンを広く設定することで解決しました。これにより、リスト全体が右側に向かって前の位置に戻りました。

CSS：

ol.classname {margin：0; padding：0;}

ol.classname li {margin：0.5em 0 0 0;パディング左：0;リストスタイル位置：外側;}

HTML：

<ol class="classname" style="margin:0 0 0 1.5em;">
0
Chris