CSS経由の順序付きリストの2行目のインデントを維持するにはどうすればよいですか？

260

箇条書きの箇条書きまたは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つの値のみを提供します。「内側」では、2行目は上位行ではなくリストポイントと同じ高さになります。

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

私のリストの「外側」の幅は、もはや優れたテキストブロックでフラッシュされていません。

実験では、テキストのインデント、パディング左、マージン左の幅は順序付けられていないリストで機能しますが、順序付きリストでは、リストの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」と比較して、上位のテキストブロックとフラッシュしません。そして「4.」。

では、順序付きリストと2行目のインデントの秘密はどこにあるのでしょうか。がんばってくれてありがとう！

html  css  html-lists 
— カーンフルヒト
ソース
1
ユーザーPali Madraはこれを回答として追加しましたが、それ以上の説明が含まれていないため削除されました。jsfiddleがあなたが探しているものかもしれないと彼は言った：jsfiddle.net/palimadra/CZuXY/1
— bfavaretto '24
padding-leftのみを設定してみてください...
— matzone '21
3
「基本リストのインデント」を探しているだけの誰かがこの質問に出くわした場合は、この質問（stackoverflow.com/questions/17556496/…）とNatasha Banegasの回答を見てください。
— SunnyRed 2014
実際の質問に答える答えは1つではありません。実際の問題は、リスト内の数字を左揃えにして、リストアイテムのテキストを2番目以降の行にオーバーフローしたときに、その上にあるアイテムテキストと個別に左揃えにする方法です。デフォルトでは、そしてほぼすべての回答で、リストの数字は右揃えになり、リスト項目のテキストは左揃えになります。
— Jessie Westlake

回答:

267

更新

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

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つのコロンを使用したレガシー表記を使用します。

— ユーザー123444555621
ソース
2
@Perelli fooは任意の文字列（id）でありcounter-reset、counter-incrementとcounter()プロパティを接続するために使用されます。
— user123444555621 2013
3
また、使用してグラグラテーブルのものを避けることができるposition: relativeに<li>してposition: absolute生成されたコンテンツに。例については、jsfiddle.net / maryisdead / kgr4kを参照してください。
— maryisdead 14
2
@maryisdeadなんで40px？カウンターがそれより広い場合、それは壊れます。テーブルレイアウトを使用する重要な点は、ブラウザが自動的にコンテンツにフィットすることです。
— user123444555621 2014
5
いいですが、<li>下マージンをどのように制御しますか？<li>の高さは、その中のテーブルセル要素の高さによってのみ決定されます。したがって、これらの要素のマージン、パディング、高さは影響しません。この制限を回避するにはどうすればよいですか？
— hschmieder、2015
3
複数行のリストアイテムがあり、一貫した垂直方向の間隔が必要な場合の解決策は、olセレクターに垂直方向のborder-spacingを追加することです。たとえば、border-spacing：0 3px; 番号は常に1行だけなので、テーブルセルの通常のパディングは機能しません。
— RemBem 2015年
207

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

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

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

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

— JTOrlando
ソース
21
padding-left：1em;も追加した方がよいでしょう。
— BenceGacsályi2013
16
これは、このページのすべてのソリューションの中で最も優れた回答です。他のものよりはるかに便利です。どの答えを選ぶか迷っているなら、これを選んでください。
— Valentin Mercier 2014年
25
@loremmonkeyこれは簡単で汚れていますが、実際の解決策ではありません。まず、1emインデントのスペースと等しくありません。線は完全にピクセル単位で整列しません。次に、リストが10に達したときはどうでしょうか。100？テキストインデントは機能せず、配置されません。この回答は反対票です。
— 2015年
1
@Sunny番号の付いたリストではないので、なぜ100に数えるのですか？上記のコードを使用したリストでは、何の問題もありません。
— lorem monkey 2015
2
@loremmonkeyインデントはありません1em。 oi60.tinypic.com/a0eyvs.jpg最初のリスト項目は、上記のテキストインデント技術を使用しています。list-style-positionを使用した場合の通常の外観と比較すると、外側がずれており、この場合はピクセルがずれています。
— サニー
39

ハックなしで最も簡単でクリーンな方法は、次のようにul（またはol）をインデントすることです：

ol {
  padding-left: 40px; // Or whatever padding your font size needs
  list-style-position: outside; // OPTIONAL: Only necessary if you've set it to "inside" elsewhere
}

これは、受け入れられた回答と同じ結果になります。 https //jsfiddle.net/5wxf2ayu/

スクリーンショット：

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

— チャック・ル・バット
ソース
1
に申請list-style-position: outsideする必要があるかもしれません<li>。
— アレックス
@Alexこれを行う必要があるのは、既存のスタイル（developer.mozilla.org/en/docs/Web/CSS/list-style-position）を強制的に上書きする場合のみです。
— チャックルバット2017年
25

このフィドルを確認してください：

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/

それを書き留めてください。

— ディーパンバブ
ソース
ありがとう、ULとOLで最大9個のリストエントリを使用できます。これが私の質問幅11/12で説明した主な問題です。上記の私の例では、他の手法を実行して問題は異なっているように見えますが、問題の核心は同じままです：10進数のリストポイントに1つまたは2つ以上の数値がある場合、たとえば1.、11、または111.！CSSを介して反応し、text-indentとmargin-leftを数値の数に調整できる点がわかりません。
— kernfrucht
ol（数字以上）の2行目のインデントについては、CSSはそれを解決しないと思います。jqueryのみを使用する必要があります。
— Deepan Babu、2012
また、のtype属性<ol>はHTML 5 style="list-style-type: "では推奨されないようです。代わりに使用してください。
— AJ。
2
21人は本気ですか？これは動作しません。投稿してからコードを変更したかどうかはわかりません。
— JGallardo 2017年
9

olまたはulCSS でマージンとパディングを設定できます

ol {
margin-left: 0;
padding-left: 3em;
list-style-position: outside;
}
— luke2012
ソース
残念ながら、この解決策では問題は解決されません
— 。2
jsfiddle.net/j7MEd/1の 11と12 は上部と下部の段落に並んでおり、コードは変更していません。何か不足していますか？
— luke2012
いいえ、それはポイントではありません。主な問題は、各リストポイントの2番目（および3番目など）の行が最初の行と同じ「インデント」を持たないことです。（jsfiddle-exampleを参照）。上記の私の質問では、パディング、マージンなどの回避策について考えていますが、それは順序付けされていないリストでのみ機能します。順序付きリストでは、この11/12のような新しい問題が発生します。したがって、私の主な質問は、11/12のような問題が発生せずに、順序付けされたリストに対してインデント（たとえば、最初の例のように）を行うにはどうすればよいですか。
— kernfrucht
了解しました。これは1つの方法です。唯一の問題は、IEでマージンを設定し、Firefoxでパディングを設定する必要があるクロスブラウザーを実現することです。jsfiddle.net/j7MEd/2
— luke2012
7

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

li {
    list-style-position: outside;
    padding-left: 1em;
}
— 既知の色
ソース
6

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/

— ラフォーコン
ソース
5

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

ul{
    margin-left: 1em;
}

li{
    list-style-position: outside;
    padding-left: 0.5em;
}
— タコ
ソース
4

私の解決策はPumbaa80の解決策とまったく同じdisplay: tableですがdisplay:table-row、li要素の代わりに使用することをお勧めします。したがって、次のようになります。

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の

— アレックス
ソース
1

私はこの解決策を自分でとても気に入っています：

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;
}
— コーリーバルー
ソース
問題のあるフォントサイズのみ
— atilkan '30 / 11/17
0

ol、ulリストは、ボーダー付きのテーブルを使用する場合にも機能します。CSSではなし。

— カジュアルボット
ソース
これはセマンティックルールに関しては良い解決策ではないと思います
— kernfrucht
0

CSSは、「list-style-position」に対して、内部と外部の2つの値のみを提供します。「内側」では、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; padding-left：0; list-style-position：outside;}

HTML：

<ol class="classname" style="margin:0 0 0 1.5em;">
— クリス
ソース
-1

OK、戻っていくつかのことを理解しました。これは、私が提案していたものに対する大まかな解決策ですが、機能しているようです。

まず、番号を一連の順序付けられていないリストにしました。順序付けられていないリストでは、通常、各リストアイテムの先頭にディスクがあります（

  • ）したがって、CSSをlist-style：noneに設定する必要があります。

    次に、リスト全体を表示しました：table-row。ここで、コードを取得する代わりに、コードを貼り付けてみませんか？

    <html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    <title>Result</title>
</head>
<body>
    <div><ul>
        <li>1.</li>
        <li><p>2.</p></li>
        <li>10.</li>
        <li><p>110.</p></li>
        <li>1000.</li>
    </ul>
    </div>
    <div>
        <p>Some author</p>
        <p>Another author</p>
        <p>Author #10</p>
        <p>Author #110</p>
        <p>The one thousandth author today will win a free i-Pod!!!! This line also wraps around so that we can see how hanging indents look.</p>
        </div>
</body>
</html>'

    CSS：

    ul li{
list-style: none;
display: table-row;
text-align: right;

    }

    div {
float: left;
display: inline-block;
margin: 0.2em;

    }

    これは、2番目のdiv内のテキストを最初のdiv内の順序付きリスト内の番号に揃えるようです。リストとテキストの両方をタグで囲んだので、すべてのdivにインラインブロックとして表示するように指示できます。これはそれらをうまく並べました。

    マージンは、ピリオドとテキストの開始の間にスペースを入れるためにあります。そうでなければ、彼らは互いにぶつかり合い、それは目障りなように見えます。

    私の雇用主は、（長い書誌エントリの）ラップアラウンドテキストを、左マージンではなく、最初の行の先頭に揃えることを望んでいました。もともと私は正のマージンと負のテキストインデントをいじっていましたが、2つの異なるdivに切り替えると、divの左側のマージンが原因でテキストがすべて揃うようにする効果があることに気付きましたテキストが自然に始まるマージンでした。したがって、必要なのは、スペースを追加するための0.2emのマージンと、それ以外はすべて水泳で並んでいました。

    OPが同様の問題を抱えている場合にこれが役立つことを願っています...私は彼/彼女を理解するのに苦労しました。

    • — デビッド
    ソース
    -1

    これと同じ問題があり、user123444555621の回答を使い始めました。しかし、私はまた、追加する必要がpaddingとborderそれぞれにliそれぞれがあるため、そのソリューションは許さない、liaはtable-row。

    まず、aを使用しcounterてolの数ます。

    私たちは、その後、設定しdisplay: table;た各上liとdisplay: table-cell上:before私たちにインデントを与えます。

    最後に、トリッキーな部分です。全体にテーブルレイアウトを使用していないため、olそれぞれ:beforeが同じ幅になるようにする必要があります。ch単位を使用して、幅を文字数とほぼ同じに保つことができます。の桁数が:before異なる場合に幅を一定に保つために、数量クエリを実装できます。リストが100アイテム以上にならないことがわかっている場合:before、幅を変更するよう指示する数量クエリルールは1つだけですが、簡単に追加できます。

    ol {
  counter-reset: ol-num;
  margin: 0;
  padding: 0;
}

ol li {
  counter-increment: ol-num;
  display: table;
  padding: 0.2em 0.4em;
  border-bottom: solid 1px gray;
}

ol li:before {
  content: counter(ol-num) ".";
  display: table-cell;
  width: 2ch; /* approximately two characters wide */
  padding-right: 0.4em;
  text-align: right;
}

/* two digits */
ol li:nth-last-child(n+10):before,
ol li:nth-last-child(n+10) ~ li:before {
  width: 3ch;
}

/* three digits */
ol li:nth-last-child(n+100):before,
ol li:nth-last-child(n+100) ~ li:before {
  width: 4ch;
}
    <ol>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
</ol>
    スニペットを展開

    — ジェイコブ・アルバレス
    ソース
    弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
    Licensed under cc by-sa 3.0 with attribution required.