ホームページ > ウェブフロントエンド > CSSチュートリアル > リストスタイル画像の位置を調整するにはどうすればよいですか?

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

Linda Hamilton
リリース: 2024-12-07 16:45:15
オリジナル
809 人が閲覧しました

How Can I Adjust the Position of a List-Style-Image?

リストスタイル画像の位置調整

質問:

の位置は調整できますか? list-style-image を変更する必要がありますか?もしそうなら、どうすればよいでしょうか?

答え:

リスト項目のパディングを使用してリスト スタイル イメージの位置を調整することは実現できません。これは、パディングは主にリスト項目内のコンテンツに影響を与え、画像はそのままにするためです。

同様の効果を実現するには、背景スタイルとパディング スタイルを組み合わせて使用​​できます。

li {
  background: url(images/bullet.gif) no-repeat left top; /* Adjust 'left' and 'top' for further control */
  padding: 3px 0px 3px 10px;
  /* Optional: Reset styles */
  list-style: none;
  margin: 0;
}
ログイン後にコピー

あるいは、スタイルを親リスト コンテナ (ul) に適用して、箇条書きリスト項目を配置することもできます。以下で参照する A List Apart の記事は、この点に関する貴重な情報を提供します。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート