1

前回の質問では、CSS を使用して<li></li>タグの自動生成リスト番号を作成しました。別のタスクでは、下の図に示すように、リストの間にタイトルを持つ別のリストを作成する必要があります。

例

上記の例は、以下のコードを使用して実現できます

HTML

<ol class="main">
    <span class="title">Title</span>
    <li>
        Content
    </li>
    <li>
        Content
    </li>
    <span class="title">Title</span>
    <li>
        Content
    </li>
</ol>

CSS

ul {counter-reset:section}
li {margin:15px 0;text-align:justify}
li:before {counter-increment:section;content:""}
.main {list-style-position:inside;list-style-type:none;padding:0}
.main span {font-weight:700;text-decoration:underline}
.inner {padding:0}
.inner ul {counter-reset:section}
.inner ul > li:before {content:""}
ul {list-style-type:lower-alpha}

ただし、このコードは Opera などの一部のブラウザでは機能しません。これは、HTML 5 では、<span></span>tag を element 内にネストできないため<ol></ol>です。

Firefox、Chrome、Internet Explorer で動作するjsFiddle 。

4

2 に答える 2

1

これは、Chrome 26 および FF 20 で動作する純粋な CSS バージョンです (他のブラウザーではテストしていません)。以前の質問からの変更点は、毎回カウンターをリセットする必要がないことです。

/* Don't reset every time!!! */
/* ol.inner {counter-reset:section;} */

ol.inner li {counter-increment:section;}
ol.inner li:before {content: counters(section,"") ". ";}
于 2013-05-15T13:40:57.173 に答える
0

順序付けられていないリスト内に入れ子にし<ol>て、それぞれに開始位置を割り当てることができます。

<ul class="main">
  <li>Title Of Section
      <ol>
          <li>Content 1</li>
      </ol>
  </li>
  <li>Title Of Section
      <ol start="2">
          <li>Content 1</li>
          <li>Content 2</li>
          <li>Content 3</li>
      </ol>
  </li>
</ul>

jquery を使用して、順序付けされた各リストの aart 位置を自動的に更新するクイック フィドルをまとめました。

于 2013-05-15T13:26:51.623 に答える