3

重複の可能性:
HTML の入れ子になった番号付きリスト

私はCSS初心者なので、お詫び申し上げます。

利用規約のリストがあります。

各セクションには、次のように番号が付けられています。

1.0 This Website
1.1 This website...
1.2 etc etc

2.0 ...
2.1 ...
2.2 ...

順序付きリストを使用できることはわかっていますが、理解しているように、「開始」プロパティは減価償却されています。

どのような代替手段がありますか?

4

3 に答える 3

2

Mozillaから盗む- CSS カウンターの使用

JSFiddle

HTML:

<ol class="level0">
  <li>This Website
    <ol>
      <li>This website</li>
      <li>etc etc</li>
    </ol>
  </li>
  <li>...
    <ol>
      <li>...</li>
      <li>...</li>
    </ol>
  </li>
</ol>

CSS:

ol {
  counter-reset: section;
  list-style-type: none;
}

ol.level0 > li:before {
  counter-increment: section;
  content: counters(section, ".") ".0 ";
}

li:before {
  counter-increment: section;
  content: counters(section, ".") " ";
}
于 2013-01-17T11:20:38.303 に答える
1

list-style-type css プロパティを使用することもできます。

ol { list-style-type: decimal; }
于 2013-01-17T10:35:22.723 に答える
1

これにはカウンターインクリメントを使用できます。次のように記述します: HTML

<ol>
  <li>item 1
    <ol>
      <li>sub item 1</li>
      <li>Sub item 2</li>
   </ol>
  </li>
  <li>item 2
    <ol>
      <li>sub item 1</li>
      <li>Sub item 2</li>
   </ol>
  </li>
</ol>

CSS

ol {
  counter-reset: section;
  list-style-type: none;
}     
ol li { counter-increment: section; }

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

これをチェックしてくださいhttp://jsfiddle.net/xC8ne/10/

HTML の番号のネストされた順序付きリストについては、これを確認してください

于 2013-01-17T11:21:10.620 に答える