CSS でリスト スタイルの画像の位置をカスタマイズするにはどうすればよいですか?

リスト スタイル イメージの位置のカスタマイズ

リスト アイテムにパディングを適用すると、リスト スタイル イメージは静止したままになります。これは、目的の書式設定を実現するための制限となる可能性があります。

背景スタイルを使用した解決策

list-style-image の位置を直接調整することは実現できません。ただし、背景スタイルとパディング スタイルを組み合わせると、同様の効果をシミュレートできます:

li {
  background: url(images/bullet.gif) no-repeat left top;
  padding: 3px 0px 3px 10px;
  list-style: none;
  margin: 0;
}

この例では:

• background は list-style-image を配置します。
• パディングは、画像に対するコンテンツの位置を決定します。
• リスト スタイルとマージン スタイルをリセットすると、

代替アプローチ

目標が箇条書きリスト全体をコンテナ内に配置することである場合は、親リスト コンテナ (ul) のスタイルを検討してください。 A List Apart 記事などのリソースがガイダンスを提供します: [スタイリッシュな「ボックス」コンテナーを順序付けされていないリストに追加](https://alistapart.com/article/box-model-list-styling)

以上がCSS でリスト スタイルの画像の位置をカスタマイズするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。