☰

順序付きリストの数字をカスタマイズするにはどうすればいいですか? 質問する

tag-icon • tag-icon html css html-lists roman-numerals
順序付きリストの数字をカスタマイズするにはどうすればいいですか? 質問する

順序付きリスト内の数字を左揃えにするにはどうすればよいでしょうか?

1.  an item
// skip some items for brevity 
9.  another item
10. notice the 1 is under the 9, and the item contents also line up

順序付きリスト内の数字の後の文字を変更しますか?

1) an item

また、ol 要素の type 属性を使用する代わりに、数字からアルファベット/ローマ字のリストに変更する CSS ソリューションはありますか。

私は主に Firefox 3 で機能する回答に興味があります。

ベストアンサー1

これは、Firefox 3、Opera、Google Chrome で機能している解決策です。リストは IE7 でも表示されます (ただし、閉じ括弧と左揃えの数字は表示されません)。

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;
}
<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine<br>Items</li>
  <li>Ten<br>Items</li>
</ol>

編集：Stragerによる複数行の修正が含まれています

また、ol 要素の type 属性を使用する代わりに、数字からアルファベット/ローマ字のリストに変更する CSS ソリューションはありますか。

参照するリストスタイルタイプCSS プロパティ。または、カウンターを使用する場合、2 番目の引数は list-style-type 値を受け入れます。たとえば、次の例では大文字のローマンが使用されます。

li::before {
  content: counter(item, upper-roman) ") ";
  counter-increment: item;
/* ... */

おすすめ記事