プロが教えるわが家の防犯対策術!

こんにちは。nekotoraと申します。
CSSを使用して、リストの行頭に画像を表示させる方法を2つ試しました。
以下、スタイルシートの部分です。

ul.kajo{list-style-image:url(images/list04.gif);
vertical-align:middle;}


li.ban{list-style-type:none;
padding-left:22px;
background-image: url(images/list04.gif);
background-repeat: no-repeat;}

前者の結果は、画像と文字の距離を変更することが
できないようです。
後者の結果は、画像と文字の距離を変更できますが、
左側にマージンを設定したように引っ込んでしまい
ます。
前者のように表示して、画像と文字の距離を変更
することは可能でしょうか?
どうぞよろしくお願い申し上げます。

A 回答 (1件)

こんなのはいかがでしょう?



ul {
margin-left: 18px;
padding-left: 0px;
list-style: none;
}
li {
padding-left: 15px;
background: url(images/list04.gif) no-repeat 0 0.25em;
}

ulのmarginでリスト自体の位置を変えられます。
liのpaddingでリストマークと文字の間隔を調節してください。
リストマークの縦位置の調節は最後の0.25emの数値を変えていじってみてください。
    • good
    • 0
この回答へのお礼

rody555さん、こんにちは。
コメントありがとうございました。
結局、下記のように落ち着きました。
今回使用の画像が、文字に大体合っている大きさ
だったのでラッキーでした。
でも0.25emの値を変更する方法は勉強になりました。
ありがとうございました。
margin-leftを使うことができたのですね。
自分が試したときは、どうしても動かなくて
cssの中で泥沼化しておりました。
ありがとうございました。

ul {margin-left:20px}

li {list-style-type:none;
padding-left:22px;
background-image: url(images/list04.gif);
background-repeat: no-repeat;
}

お礼日時:2006/06/16 14:05

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!