0

このような数字でネストされた順序付きリストを作成する方法を探していました

1.
   1.1
   1.2
2.
   2.1
   2.2

私はそれをフィドルで動かしています。

フィドル

問題は、タイプolをローマ数字に変更するtype="I"と、追加した CSS が原因で機能しないことです。

    <ol type="I">
    <li>Elemento primero
        <ol type="I">
            <li>Subelemento primero</li>
            <li>Subelemento segundo</li>
        </ol>
    </li>
    <li>elemento segundo</li>
</ol>
    <ol type="I">
        <li>Subelemento primero</li>
        <li>Subelemento segundo</li>
    </ol>

CSS:

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

2 に答える 2

2

ネストされた番号付けを表示するために CSS カウンターを使用しており、 default とは異なり、出力形式は属性olによって変更されません。type="I"カウンターの出力形式を明示的にローマ数字に設定する必要があります。デフォルトでは、出力形式は 10 進数ですが、list-style-typeプロパティで使用できるすべてのスタイルはカウンターでも使用できます (ソース: W3C 仕様)。

upper-romanこれは、 (と同等type="I") またはlower-roman(と同等type="i") をパラメーター値の 1 つとしてcounters()orcounter()関数に渡すことで実現できます。

OL {
  counter-reset: item
}
LI {
  display: block
}
LI:before {
  content: counters(item, ".", upper-roman)" ";
  counter-increment: item;
}
<ol type="I">
  <li>Elemento primero
    <ol type="I">
      <li>Subelemento primero</li>
      <li>Subelemento segundo</li>
    </ol>
  </li>
  <li>elemento segundo</li>
</ol>
<ol type="I">
  <li>Subelemento primero</li>
  <li>Subelemento segundo</li>
</ol>

于 2015-11-27T16:44:21.273 に答える
0

どうぞ - コンテンツをアッパーローマンとして設定する必要がありました。

OL {
    counter-reset: section;
}
LI {
    display: block;
    counter-reset: number;
}
LI:before {
    counter-increment: section;
    content: "Section " counter(section, upper-roman) ". ";
}
于 2015-11-27T16:51:39.223 に答える