順序付きリストの番号付けをカスタマイズするにはどうすればよいですか?

順序付きリストの番号付けのカスタマイズ

質問: 順序付きリストをカスタマイズして番号の配置を変更するにはどうすればよいですか。数字の後の文字を変更し、数字からアルファベット/ローマ字に切り替えるnotation?

数値の左揃え:

順序付きリスト内の数値を左揃えにするには、次のように CSS を利用します:

ol {
  counter-reset: item;
  margin-left: 0;
  padding-left: 0;
}
li {
  display: block;
  margin-bottom: .5em;
  margin-left: 2em;
}
li::before {
  display: inline-block;
  content: counter(item) ") ";
  counter-increment: item;
  width: 2em;
  margin-left: -2em;
}

カスタム番号文字:

数字の後の文字を変更するには、上記の CSS の content プロパティを変更します。たとえば、ピリオドを「.)」に変更します:

content: counter(item) ".) ";

アルファベット/ローマ字表記に切り替える:

数字からアルファベット/ローマ字リストに切り替えるには、ol 要素の type 属性を使用します:

• type="a"アルファベット小文字表記
• type="A" アルファベット大文字表記
• type="i" 小文字ローマ字表記
• type="I" ローマ字大文字表記

互換性:

提供される CSS ソリューションは、Firefox 3、Google Chrome、および Opera と互換性があります。ただし、IE7 では完全に動作しない可能性があります。

以上が順序付きリストの番号付けをカスタマイズするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。