順序付けられたリストは、CSSを使用して（1、2、3、…ではなく）1.1、1.2、1.3のような結果を生成できますか？

201

順序付けされたリストは、CSSで（1、2、3、...ではなく）1.1、1.2、1.3のような結果を生成できますか？これまでのところ、使用したのlist-style-type:decimalは1、2、3のみで、1.1、1.2、1.3ではありません。

html  css 
— リチャード77
ソース
受け入れられた回答をJakub Jirutkaの回答と比較することをお勧めします。後者の方がはるかに優れていると思います。
— フランクConijn
エレガントなソリューション。ウィキペディアがこれの代わりにコンテンツセクションにulを使用する理由はありますか？
— Mattypants 2018
1
@davnicwil同意する。おそらく9月に複製を間違った順序で適用しただけのようです。
— TylerH
かっこいい、今では発生しなかったので、ぎこちなく感じています。このような単純なエラーの可能性があります。お詫びします。
— davnicwil

回答:

289

そのためにカウンターを使用できます。

次のスタイルシートは、ネストされたリストアイテムに「1」、「1.1」、「1.1.1」などの番号を付けます。

OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }

例 

ol { counter-reset: item }
li{ display: block }
li:before { content: counters(item, ".") " "; counter-increment: item }
<ol>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
  <li>li element</li>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
</ol>
スニペットを展開

詳細については、ネストされたカウンターとスコープを参照してください。

— ガンボ
ソース
2
素晴らしい答え。これに対するサポートは何ですか？
— Jason McCreary、2010年
1
@Jason McCreary：そうですね、それはマイナス面です。バージョン8までは、カウンターはIEでサポートされていません。
— 2010年
3
この解決策は、1つの小さなこと、つまりアイテム番号に続くドットを逃します。標準のリストスタイルとは異なります。次のルールにドットを追加することで修正しli:beforeます： content: counters(item, ".")". ";
— LS
4
これは悪い答えです。正常に動作しません。以下のJakub Jirutkaの回答をご覧ください
— Pablo氏
1
@Gumbo知っているし、Jakubの答えは正しい番号付けをしてくれた。
— Pablo氏
236

このページの解決策は、すべてのレベルと長い（ラップされた）段落に対して正しく、普遍的に機能しません。マーカーのサイズが可変であるため、一貫したインデントを実現するのは本当に難しい（1.、1.2、1.10、1.10.5、…）。可能なインデントレベルごとに事前に計算されたマージン/パディングがあったとしても、それを単に「偽造」することはできません。

最終的に、実際に機能し、JavaScriptを必要としないソリューションを見つけました。

Firefox 32、Chromium 37、IE 9、Androidブラウザーでテストされています。IE 7以前では動作しません。

CSS：

ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

ol > li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

ol > li:before {
  content: counters(item, ".") ". ";
  display: table-cell;
  padding-right: 0.6em;    
}

li ol > li {
  margin: 0;
}

li ol > li:before {
  content: counters(item, ".") " ";
}

例： 例

上でそれを試してみてくださいJSFiddleでそれをフォーク、要旨。

— ヤクブ・ジルカ
ソース
1
このタイプのインデントを達成する良い仕事。ただし、リストしたインデントの最初の2つのケースは、正誤ではなく好みの問題であると私はまだ主張します。ケース1とケース2を検討してください。後者は、かなりきれいに見えながら、間隔が扱いにくくなる前に、はるかに多くのレベルで圧迫することができます。さらに、MS Wordとデフォルトのブラウザーのスタイル設定では、どちらもユースケース2のインデントが使用されます。彼らもそれを間違っていると思いますか？
— Saul Fautley、2015年
2
@ saul-fautleyタイポグラフィの点で間違っています。ネストされたレベルの数が非常に多い例は、ネストされた番号付けが多くのレベルに適していないことを示していますが、それはかなり明白です。MS Wordsは組版システムではなく、タイポグラフィが不十分な単なるドキュメントプロセッサです。デフォルトのブラウザのスタイリング…おお、タイポグラフィーについてあまり知らないのですか？
— Jakub Jirutka、2015年
3
すべてのレベルと長い段落で（技術的に）機能します。ダースレベルを使用することが合理的である場合、それは技術的なソリューションとは何の関係もない別の問題です。重要なのは、他のいくつかのソリューションのように、ネストレベルごとにCSSルールを事前定義する必要がないことです。
— Jakub Jirutka、2015年
4
他の答えと本質的に「間違っている」ことは何もないとは言いませんが、それらは不完全であると言います。この答えは正解で、私が修正している恐ろしく奇妙なスタイルのサイトでも機能しました。
— DanielM 2015年
2
@tremby：この矛盾は、liに「display：table」の代わりに「display：table-row」を使用することで解決できます。これによりもたらされる問題は、表の行は常にコンテンツによって自動的にサイズが調整されるため、liがマージン/パディングを使用できないことです。これは、「li：after」と「display：block」を追加することで回避できます。完全な例については、jsFiddleを参照してください。追加のボーナスとして、「li：before」に「text-align：right」を追加して、数値を右揃えにしました。
— mmlr 2017
64

選ばれた答えは素晴らしいスタートですが、それは本質的list-style-position: inside;にリスト項目のスタイルを強制し、折り返されたテキストを読みにくくします。これは、数値とテキストの間のマージンを制御し、デフォルトの動作に従って数値を右揃えにする簡単な回避策です。

ol {
    counter-reset: item;
}
ol li {
    display: block;
    position: relative;
}
ol li:before {
    content: counters(item, ".")".";
    counter-increment: item;
    position: absolute;
    margin-right: 100%;
    right: 10px; /* space between number and text */
}

JSFiddle： http ://jsfiddle.net/3J4Bu/

— ソール・フォートリー
ソース
1つの欠点は、各リストアイテムの末尾にピリオドが追加されることです。
— Davin Studer 2014
3
@Davin Studer：デフォルトのol動作に従って、各数値の終わりにピリオドを追加するだけです。プロパティ"."から最後を削除することで簡単に削除できますがcontent、これは少し奇妙に見えます。
— Saul Fautley 2014
14

ここに投稿された解決策は私にとってうまくいかなかったので、この質問と次の質問の両方を組み合わせて行いました：HTMLで複数レベルの順序付きリストを作成することは可能ですか？

/* Numbered lists like 1, 1.1, 2.2.1... */
ol li {display:block;} /* hide original list counter */
ol > li:first-child {counter-reset: item;} /* reset counter */
ol > li {counter-increment: item; position: relative;} /* increment counter */
ol > li:before {content:counters(item, ".") ". "; position: absolute; margin-right: 100%; right: 10px;} /* print counter */

結果：

スクリーンショット

注：ソースコードまたはこの投稿の内容を確認する場合のスクリーンショット：http : //estiloasertivo.blogspot.com.es/2014/08/introduccion-running-lean-y-lean.html

— Chelder
ソース
1
これは、ページ全体からの最良（かつ最も単純）な回答です。
— Bruno Toffolo
6

注：CSS を使用して、最新のブラウザーでネストされた番号付けを作成します。受け入れられた答えを見てください。以下は歴史的関心のためだけのものです。counters

ブラウザがcontentおよびをサポートしている場合counter、

.foo {
  counter-reset: foo;
}
.foo li {
  list-style-type: none;
}
.foo li::before {
  counter-increment: foo;
  content: "1." counter(foo) " ";
}
<ol class="foo">
  <li>uno</li>
  <li>dos</li>
  <li>tres</li>
  <li>cuatro</li>
</ol>
スニペットを展開

— ケニーTM
ソース
リストがネストされている場合、このソリューションはひどく失敗します。
— LS
@LSセレクターは常にニーズに合わせて調整できます。.foo > ol > li。
— kennytm 2014年
1
私のポイントは、「1」をハードコーディングしたということです。スタイルに。サブリストが親リストの2番目の項目の子である場合はどうなりますか？「2.」と表示したいが、常に「1」になります。ここでのコーディング方法が原因です。解決策は何ですか？可能なすべての番号に対して新しいスタイルのセットを作成しますか？いいえ。counters()上記の例のように、counter()関数の代わりに関数を使用します。
— LS
2 
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="author" content="Sandro Alvares - KingRider">
    </head>
    <body>
        <style type="text/css">
            li.title { 
                font-size: 20px; 
                font-weight: lighter; 
                padding: 15px; 
                counter-increment: ordem; 
            }
            .foo { 
                counter-reset: foo; 
                padding-left: 15px; 
            }
            .foo li { 
                list-style-type: none; 
            }
            .foo li:before { 
                counter-increment: foo; 
                content: counter(ordem) "." counter(foo) " "; 
            }
        </style>
        <ol>
            <li class="title">TITLE ONE</li>
            <ol class="foo">
                <li>text 1 one</li>
                <li>text 1 two</li>
                <li>text 1 three</li>
                <li>text 1 four</li>
            </ol>
            <li class="title">TITLE TWO</li>
            <ol class="foo">
                <li>text 2 one</li>
                <li>text 2 two</li>
                <li>text 2 three</li>
                <li>text 2 four</li>
            </ol>
            <li class="title">TITLE THREE</li>
            <ol class="foo">
                <li>text 3 one</li>
                <li>text 3 two</li>
                <li>text 3 three</li>
                <li>text 3 four</li>
            </ol>
        </ol>
    </body>
</html>

結果：http : //i.stack.imgur.com/78bN8.jpg

— キングライダー
ソース
2

2つのリストがあり、2番目のリストがDIV内にある場合、いくつかの問題があります。2番目のリストは、2.1ではなく1から開始する必要があります。

<ol>
    <li>lorem</li>
    <li>lorem ipsum</li>
</ol>

<div>
    <ol>
        <li>lorem (should be 1.)</li>
        <li>lorem ipsum ( should be 2.)</li>
    </ol>
</div>

http://jsfiddle.net/3J4Bu/364/

編集： 私はこのhttp://jsfiddle.net/hy5f6161/で問題を解決しました

— ロバータ
ソース
1

近い将来、::marker疑似要素を使用して、他のソリューションと同じ結果を1行のコードで実現できるようになる可能性があります。

ブラウザ互換性テーブルを必ず確認してくださいこれはまだ実験的な技術である。現時点では、FirefoxとAndroid版Firefoxのみをバージョン68以降でサポートしています。

以下は、互換性のあるブラウザーで試した場合に正しくレンダリングされるスニペットです。 

::marker { content: counters(list-item,'.') ':' }
li { padding-left: 0.5em }
<ol>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
  <li>li element</li>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
</ol>
スニペットを展開

また、トピックについてsmashingmagazineでこの素晴らしい記事をチェックすることもできます。

— チリオン
ソース
0

順序付きリストと順序なしリストのコンポーネントが混在するリストを使用していたため、これを12で投稿したソリューションに追加する必要がありました。content：no-close-quoteを追加するのは奇妙に思えますが、うまくいきます...

ol ul li:before {
    content: no-close-quote;
    counter-increment: none;
    display: list-item;
    margin-right: 100%;
    position: absolute;
    right: 10px;
}
— ベンジャレット
ソース
0

以下は私のために働きました：

ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

ol > li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

ol > li:before {
  content: counters(item, ".") ") ";
  display: table-cell;
  padding-right: 0.6em;
}

li ol > li {
  margin: 0;
}

li ol > li:before {
  content: counters(item, ".") ") ";
}

見てください：http : //jsfiddle.net/rLebz84u/2/

または、この1つhttp://jsfiddle.net/rLebz84u/3/ より正当なテキスト

— ウィリーウォンカ
ソース
見て時間の無駄。以前の回答とほぼ同じです。マーカーの末尾に「）」だけの違いが追加されています。
— juanitogan
0

他のcssの最初の子liサイズを変更する場合、これは適切なコードです。

<style>
    li.title { 
        font-size: 20px; 

        counter-increment: ordem; 
        color:#0080B0;
    }
    .my_ol_class { 
        counter-reset: my_ol_class; 
        padding-left: 30px !important; 
    }
    .my_ol_class li { 
          display: block;
        position: relative;

    }
    .my_ol_class li:before { 
        counter-increment: my_ol_class; 
        content: counter(ordem) "." counter(my_ol_class) " "; 
        position: absolute;
        margin-right: 100%;
        right: 10px; /* space between number and text */
    }
    li.title ol li{
         font-size: 15px;
         color:#5E5E5E;
    }
</style>

htmlファイル内。

        <ol>
            <li class="title"> <p class="page-header list_title">Acceptance of Terms. </p>
                <ol class="my_ol_class">
                    <li> 
                        <p>
                            my text 1.
                        </p>
                    </li>
                    <li>
                        <p>
                            my text 2.
                        </p>
                    </li>
                </ol>
            </li>
        </ol>
— Sandeep Kumar
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.