ホームページ ウェブフロントエンド CSSチュートリアル HTML で右括弧を順序付きリスト マーカーとして使用するにはどうすればよいですか?

HTML で右括弧を順序付きリスト マーカーとして使用するにはどうすればよいですか?

Nov 24, 2024 am 02:22 AM

How Can I Use Right Parentheses as Ordered List Markers in HTML?

順序付きリスト マーカーのカスタマイズ: 下位アルファの右括弧

HTML の順序付きリストの標準の下位アルファ タイプはドット (' .')、ただし、右括弧 ('a)'、'b)' などを使用する必要がある場合はどうすればよいですか)代わりに?

CSS は、要素の自動番号付けを可能にするカウンターを使用したソリューションを提供します。少し変更を加えることで、目的のリスト スタイルを実現できます。

ol {
  counter-reset: list;
}
ol > li {
  list-style: none;
}
ol > li:before {
  content: counter(list, lower-alpha) ") ";
  counter-increment: list;
}
ログイン後にコピー

この CSS コードでは次のようになります。

  • counter-reset: list; 「list」というカウンタを 0 に初期化します。
  • list-style: none;デフォルトのリストのスタイル (ドットやダッシュなど) を削除します。
  • content: counter(list, lower-alpha) ") ";各リスト項目の前に挿入されるコンテンツを定義します。これは、右括弧が後に続く小文字形式のカウンター値です。
  • counter-increment: list;リスト項目ごとに「リスト」カウンターを 1 ずつ増やします。

この CSS を組み込むことにより、順序付きリストには右括弧で囲まれた下位アルファのマーカーが表示されます。必要に応じてパディングやその他のスタイル プロパティを調整し、要件に従ってリストを位置合わせして表示します。

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

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

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

WordPressブロックと要素にボックスシャドウを追加します WordPressブロックと要素にボックスシャドウを追加します Mar 09, 2025 pm 12:53 PM

WordPressブロックと要素にボックスシャドウを追加します

Smart Forms Frameworkを使用してJavaScript連絡フォームを作成する Smart Forms Frameworkを使用してJavaScript連絡フォームを作成する Mar 07, 2025 am 11:33 AM

Smart Forms Frameworkを使用してJavaScript連絡フォームを作成する

満足している属性を持つインラインテキストエディターを作成します 満足している属性を持つインラインテキストエディターを作成します Mar 02, 2025 am 09:03 AM

満足している属性を持つインラインテキストエディターを作成します

GraphQLキャッシングの使用 GraphQLキャッシングの使用 Mar 19, 2025 am 09:36 AM

GraphQLキャッシングの使用

最初のカスタムSvelteトランジションを作成します 最初のカスタムSvelteトランジションを作成します Mar 15, 2025 am 11:08 AM

最初のカスタムSvelteトランジションを作成します

5つの最高のPHPフォームビルダー(および3つの無料スクリプト)を比較する 5つの最高のPHPフォームビルダー(および3つの無料スクリプト)を比較する Mar 04, 2025 am 10:22 AM

5つの最高のPHPフォームビルダー(および3つの無料スクリプト)を比較する

node.jsとexpressのMulterを使用してファイルアップロードします node.jsとexpressのMulterを使用してファイルアップロードします Mar 02, 2025 am 09:15 AM

node.jsとexpressのMulterを使用してファイルアップロードします

ショー、Don' t Tell ショー、Don' t Tell Mar 16, 2025 am 11:49 AM

ショー、Don' t Tell

See all articles