2

私のアプリケーションには、カテゴリ別にグループ化されたデータを一覧表示するページがあります。

リストの各アイテムには、サブアイテムを含めることができます。

だから私はこのように見えるようにしたい：

  1. リスト項目

    1.1 リスト項目

    1.2 リスト項目

  2. リスト項目

    2.1 リスト項目

    2.2 リスト項目

次の 3 行の CSS コードを使用して、これを簡単に実現できます。

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

ただし、このページには、そのようなネストされたアイテムのリストを含む各カテゴリのタブがあり、次のタブの最初のアイテムのインデックスを x + 1 番目のアイテムにする必要があります。ここで、 x は前のタブの最後のアイテムの番号です (カテゴリー ）。

#tab 1
 1. List item

   1.1 List item

   1.2 List item
 2. List item

   2.1 List item

   2.2 List item

#tab 2
 3. List item

   3.1 List item

   3.2 List item
 4. List item

   4.1 List item

   4.2 List item

<ol>したがって、タグに開始インデックスを提供する機能が必要です。属性 start="x" があることがわかりましたが、ネストされたリストのこれらの 3 行の CSS コードでは機能しません。

このようなことをする方法はありますか？

4

2 に答える 2

-1

http://www.w3.org/TR/css3-lists/#html4から:

/* The start attribute on ol elements */
ol[start] { 
    counter-reset: list-item attr(start, integer, 1); 
    counter-increment: list-item -1; 
}

これを CSS に追加すると、テストで start 属性が認識されるようになりました。

編集: start 属性を使用する代わりに、新しい開始点ごとに CSS クラスを使用できます。欠点は、何かを変更する必要がある場合に、より多くのメンテナンスが必要になることです。

CSS:

ol.start4
{
    counter-reset: item 4;
    counter-increment: item -1;
}

ol.start6
{
    counter-reset: item 6;
    counter-increment: item -1;
}

HTML:

<div>
<ol>
<li>Item 1</li>
<li>Item 2
    <ol>
    <li>Item 1</li>
    <li>Item 2</li>
    </ol></li>
<li>Item 3
    <ol>
    <li>Item 1</li>
    <li>Item 2</li>
    </ol></li>
</ol>
</div>

<div>
<ol class="start4">
<li>Item 4
    <ol>
    <li>Item 1</li>
    <li>Item 2</li>
    </ol></li>
<li>Item 5</li>
</ol>
</div>

<div>
<ol class="start6">
<li>Item 6</li>
<li>Item 7
    <ol>
    <li>Item 1</li>
    <li>Item 2</li>
    </ol></li>
</ol>
</div>
于 2013-07-30T13:58:34.413 に答える
-1

<ol>css を削除し、タグを正しく閉じて再度開くだけです。

リストを 2 つの別々のタブに分割する必要がある場合は<ol>、最初のタブ内で最初のタブを閉じる必要があります。次に、2 番目のタブ内の start パラメーターを使用して、新しいリストを再度開きます<ol start="3">。

作業中のフィドル- (動作していることを示すために start="5" を設定しました。目的に応じて、3 または必要なものに設定してください)

アップデート：

CSS を保持し、すべてのタブを main<ol>とでラップし</ol>て、カウンターがリセットされないようにします。

http://jsfiddle.net/qGCUk/227/

于 2013-07-30T14:10:30.250 に答える