list-styleでの画像CSS設定について

質問

list-styleのをCSS設定で画像を指定しています。

文字サイズより大きい画像の場合に、うまく位置を調整できないのですが、どのように設定すればよいでしょうか？

現在のCSSはこのように設定しています。

.style_1 {
list-style-image: url(画像url.gif);
}

フォントサイズ14ピクセルではピッタリはまるのですが、12ピクセルにするとリスト画像が上部に浮いたような形になってしまっています。

また、リスト画像とli要素(文章)までの間隔も離したいです。
CSSに詳しい方がいましたら、ご教授下さいませ。

回答No.3

noname#100277

listに対して別途CSSを適応させるのは？
text-indentやpadding、marginで・・・

お礼

ご回答下さいまして誠にありがとうございました。勉強になりました。

回答No.2

hetare560

こんにちは。

この場合、list-style-imageで指定するより<li>に背景画像をおいて、
background-positionで位置を指定したほうがいいと思いますよ。

例

<ul>
<li>サンプル</li>
<li>サンプル</li>
</ul>

li {
padding:0 0 0 20px;/* 背景画像分の余白を取る */
background:url(画像パス) no-repeat 5px 5px;/* 5px 5pxとなっている所で位置を調整 */
}

詳しくはこちらを参考にしてください
http://www.htmq.com/style/background.shtml

お礼

ご回答下さいまして誠にありがとうございました。とても丁寧なご投稿を嬉しく思います。<li>への背景画像指定で調節できるのですね。CSSの関連本を見ながらチャレンジしてみますね。

回答No.1

higekuman

cssには marker-offset というのがあるみたいですが、対応しているブラウザはほとんど無いようですね。

お礼

ご回答下さいまして誠にありがとうございました。勉強になりました。