順序なしリストで通常の文字を箇条書き記号として指定するにはどうすればよいですか?

順序なしリストの箇条書き記号の通常の文字の指定 (

)

CSS ではカスタム グラフィックを箇条書きとして使用できますが、 list-style-image 属性を使用してシンボルを使用する場合は、「 」などの通常の文字を単純に使用することが望ましい場合があります。シンボル。

カスタム文字の箇条書きの実装

グラフィックに頼らずに通常の文字を箇条書き記号として実装するには、次の手順に従います。

1.デフォルトのスタイルを削除:

• デフォルトのスタイルを削除するには、リストの list-style プロパティを none にリセットします。
• 任意のスタイルを削除するには、margin-left と padding-left を 0 に設定します。インデント。

2.リスト項目のインデントを設定します:

• li 項目に padding-left を追加してインデントします。
• 次の負の値で li 項目に text-indent を適用します。インデント内のテキストを整列させるためのパディング左。

3.カスタム文字を追加します:

• カスタム文字を表示する li:before 擬似要素を作成します。
• content プロパティを目的の文字 (例: " ") に設定します。 .
• リスト項目から文字の間隔を空けるために、padding-right を追加します。 text.

CSS コードの例:

ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

li {
  padding-left: 1em;
  text-indent: -1em;
}

li:before {
  content: "+";
  padding-right: 5px;
}

ログイン後にコピー

これらの手順に従って、順序なしリストのデフォルトの箇条書きを「 」記号に置き換えることができます。または、グラフィックを作成して参照することなく、他の通常の文字を使用できます。

以上が順序なしリストで通常の文字を箇条書き記号として指定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。