ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS を使用して、小文字のアルファベット数字と右かっこを含む順序付きリストを作成するにはどうすればよいですか?

CSS を使用して、小文字のアルファベット数字と右かっこを含む順序付きリストを作成するにはどうすればよいですか?

Barbara Streisand
Barbara Streisandオリジナル
2024-11-28 02:16:13897ブラウズ

How Can I Create Ordered Lists with Lowercase Alphabetical Numeration and Right Parentheses Using CSS?

下位アルファと右括弧を使用した順序付きリストの作成

下位アルファ数値のデフォルトの順序付きリスト スタイルでは、ドットが使用されます。ただし、このスタイルを変更して、代わりに右かっこを使用することはできますか?

順序付きリスト スタイルのカスタマイズ

CSS カウンターを使用して、カスタム リスト スタイルを確立できます。望ましい結果を達成する方法は次のとおりです:

ol {
  counter-reset: list;
}

ol > li {
  list-style: none;
}

ol > li:before {
  content: counter(list, lower-alpha) ") ";
  counter-increment: list;
}

この解決策をデモンストレーションするには:

<span>Custom List Style Type (v1):</span>
<ol>
  <li>Number 1</li>
  <li>Number 2</li>
  <li>Number 3</li>
  <li>Number 4</li>
  <li>Number 5</li>
  <li>Number 6</li>
</ol>

このカスタム スタイルでは、下位のアルファ数値とそれに続く右付きの順序付きリスト項目がレンダリングされます。括弧:

a) 数値 1
b) 数値 2
c) 数値3
d) 番号 4
e) 番号 5
f) 番号 6

特定のニーズに合わせて、パディングやその他のスタイルの側面を調整する必要がある場合があることに注意してください。

以上がCSS を使用して、小文字のアルファベット数字と右かっこを含む順序付きリストを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。