web-dev-qa-db-ja.com

HTMLのネストされた順序付きリストの数

ネストされた順序付きリストがあります。

<ol>
  <li>first</li>
  <li>second
  <ol>
    <li>second nested first element</li>
    <li>second nested secondelement</li>
    <li>second nested thirdelement</li>
  </ol>
  </li>
  <li>third</li>
  <li>fourth</li>
</ol>

現在、ネストされた要素は再び1から始まります。

  1. 最初
  2. 秒
    1. 2番目にネストされた最初の要素
    2. 2番目にネストされた2番目の要素
    3. 2番目にネストされた3番目の要素
  3. 第三
  4. 第4

私が欲しいのは、2番目の要素に次のように番号を付けることです。

  1. 最初

  2. 二番目

    2.1。 2番目にネストされた最初の要素

    2.2。 2番目にネストされた2番目の要素

    2.3。 2番目にネストされた3番目の要素

  3. 第三
  4. 第4

これを行う方法はありますか？

jqueryhtmlcsshtml-lists
37
John

すべてのブラウザで機能する例を次に示します。純粋なCSSアプローチは、実際のブラウザー（つまりIE6/7を除くすべて）で機能し、 jQuery コードはサポートされていないものをカバーします。それは [〜＃〜] sscce [〜＃〜] のフレーバーであり、変更せずにコピーして貼り付けて実行することができます。

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2729927</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $(document).ready(function() {
                if ($('ol:first').css('list-style-type') != 'none') { /* For IE6/7 only. */
                    $('ol ol').each(function(i, ol) {
                        ol = $(ol);
                        var level1 = ol.closest('li').index() + 1;
                        ol.children('li').each(function(i, li) {
                            li = $(li);
                            var level2 = level1 + '.' + (li.index() + 1);
                            li.prepend('<span>' + level2 + '</span>');
                        });
                    });
                }
            });
        </script>
        <style>
            html>/**/body ol { /* Won't be interpreted by IE6/7. */
                list-style-type: none;
                counter-reset: level1;
            }
            ol li:before {
                content: counter(level1) ". ";
                counter-increment: level1;
            }
            ol li ol {
                list-style-type: none;
                counter-reset: level2;
            }
            ol li ol li:before {
                content: counter(level1) "." counter(level2) " ";
                counter-increment: level2;
            }
            ol li span { /* For IE6/7. */
                margin: 0 5px 0 -25px;
            }
        </style>
    </head>
    <body>
        <ol>
            <li>first</li>
            <li>second
                <ol>
                    <li>second nested first element</li>
                    <li>second nested second element</li>
                    <li>second nested third element</li>
                </ol>
            </li>
            <li>third</li>
            <li>fourth</li>
        </ol>
    </body>
</html>
36
BalusC

返信が遅いのはわかっていますが、CSSを使用してそれを行う example を見つけました。これをCSSセクション（またはファイル）に追加します。

ol.nested
{
    counter-reset: item
}
li.nested
{
    display: block
}
li.nested:before
{
    content: counters(item, ".") ". ";
    counter-increment: item
}

リストコードの例は次のとおりです。

<ol class="nested">
<li class="nested">item 1</li>
<li class="nested">item 2
    <ol class="nested">
        <li class="nested">subitem 1</li>
        <li class="nested">subitem 2</li>
    </ol></li>
<li class="nested">item 3</li>
</ol>

HTH

33
Alexandre

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

私はようやく実際に機能するで、JavaScriptを必要としないソリューションを見つけました。

Firefox 32、Chromium 37、IE 9 and Android Browser。で動作しません。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, ".") " ";
}

例： example

jsFiddle で試してみてください Gist でフォークしてください。

8
Jakub Jirutka

これは、純粋なHTML/CSSでは不可能です。 すぐに使える優れたソリューションについては、BalusCの回答をご覧ください。番号付けタイプのリストは w3schools、here にあります。

私が見つけた最も近いオプションは value属性の使用、w3cから ですが、次のマークアップ

<ol>
    <li value="30">
        makes this list item number 30.
    </li>
    <li value="40">
        makes this list item number 40.
    </li>
    <li>
        makes this list item number 41.
    </li>
    <li value="2.1">
        makes this list item number ...
    </li>
    <li value="2-1">
        makes this list item number ...
    </li>
</ol>

30、40、41、2、2の番号が付いたリストを作成します。

Johnが既に指摘したように、この状況では、最善の策はスクリプトを作成することです。

0
Pops

少し調整すると、順次リストを作成するために ここで使用する手法 （2番目の例）を適合させることができるはずです。

0
Robert Harvey

実際、プロジェクトでスタイル設定にsass/scssを使用した場合は、 mixin を使用できます。このネストされたリストのスタイルを設定するには、2行のsassコードのみが必要です。

@import 'nested_list'
+nested_list('nested', 2)

<ol>
  <li>first</li>
  <li>second
      <ol class="nested-2">
          <li>second nested first element</li>
          <li>second nested secondelement</li>
          <li>second nested thirdelement</li>
      </ol>
  </li>
  <li>third</li>
  <li>fourth</li>
</ol>

完全な例 git repo または fidle で生成されたcssから複製/監視できます

0
alexche8