CSS リストのプロパティ: list-style-type および list-style-position

CSS リスト プロパティ: list-style-type および list-style-position、特定のコード例が必要です

フロントエンド開発では、多くの場合、表示情報のリスト。 CSS には、リストのスタイルを美しくカスタマイズするためのプロパティがいくつか用意されています。最もよく使用される 2 つのプロパティは、list-style-type と list-style-position です。

1. list-style-type 属性
   list-style-type 属性は、リスト項目のマークアップ シンボルのタイプを定義するために使用されます。デフォルトでは、ブラウザはリストの順序に基づいてマーク シンボル (通常は実線のドット (ディスク)) を自動的に生成します。ただし、list-style-type 属性を使用してマークアップ シンボルのスタイルを変更できます。

一般的に使用されるリスト スタイル タイプの値とその効果を次に示します:

• ディスク: 実線のドット
• circle:中空円 ポイント
• 四角: 黒四角
##なし: マーク記号なし
• #十進数: 10 進数 (1、2、3、...)
• decimal -leading-zero: 先頭にゼロが付いた 10 進数 (01、02、03、...)
• lower-roman: 小文字のローマ数字 (i、ii、iii、...)
upper-roman: 大文字のローマ数字 (I、II、III、...)
• lower-alpha: 小文字の文字 (a、b、c、...)
• upper-alpha: 大文字 (A、B、C、...)

たとえば、リストのマーカー シンボルを実線の正方形に変更したい場合は、次のように使用できます。コード:

ul {
  list-style-type: square;
}

list-style-position 属性
2. list-style-position 属性は、リスト項目マーク シンボルの位置を定義するために使用されます。デフォルトでは、マーカー シンボルはリスト項目の左側に配置されます。 list-style-position プロパティを使用して、リスト項目の外側または内側にマーカー シンボルを配置できます。
   

list-style-position の 2 つの値とその効果は次のとおりです:

inside: マーク シンボルはリスト項目 # の内側にあります。
• ##outside: マーカー シンボルはリスト項目の外側に配置されます
• たとえば、リスト項目のマーカー シンボルを外側に配置したい場合は、次のコードを使用できます:

ul {
  list-style-position: outside;
}

包括的な例

list-style-type と list-style-position を組み合わせて、カスタム スタイルの順序付きリストを表示する例を次に示します。
3. 
   

   ol {
     list-style-type: decimal;
     list-style-position: inside;
     padding-left: 20px;
   }
   
   ol li {
     padding-left: 10px;
     line-height: 1.5;
   }

この例では、リスト マークアップ シンボルは 10 進数で、リスト項目内に配置され、リスト項目に一定の左マージンと行の高さを追加します。

概要

list-style-type 属性と list-style-position 属性を使用すると、リストのスタイルをカスタマイズして、設計ニーズとの一貫性を高めることができます。上記の例は一般的な使用法の一部にすぎず、実際には、これら 2 つのプロパティには選択できる他の値がいくつかあります。これらの属性を柔軟に使用することで、より多様なリスト効果を作成できます。

以上がCSS リストのプロパティ: list-style-type および list-style-positionの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。