list-style-image

リスト項目の先頭をlist-style-imageで設定したのですが、
図形が大きすぎて、図のようにテキストが右下に来てしまいます。

┌──┐
│ 図　│
│　　　│abcde
└──┘

テキストを中央にして、abcdeと図の間を１文字分くらい
あけたいのですが、どうすればいいですか。

No.1 ベストアンサー 回答者： yui56544 回答日時： 2011/09/22 08:32

リストマークに画像を指定する場合は、list-style-imageではなく、背景画像として指定した方が見栄えがよくなります

例えばこのような感じです

li {
backdround: url(画像のURL) left center no-repeat;
padding: 3px 0px 3px 20px;　　/*画像のサイズによるので調節してください*/
}

この回答へのお礼

liの中でbackgroundを指定するんですか。
こんなこと出来るなんて初めて知りました。

ご回答有り難うございます。

お礼日時：2011/09/22 14:43

No.3 回答者： taloo 回答日時： 2011/09/22 10:17

>テキストを中央にして、

>abcdeと図の間を１文字分くらい

{
vertical-align: middle;
list-style-position: outside;
padding-left: 1em;
}

未検証です。

この回答への補足

ご報告します。
padding-leftはうまく行ったのですが、
vertical-alignはダメでした。

No1の方の方法は画像が重なってダメ。
beforeも機能せずでした。

結局No1の方の方法をdivで採用しました。
list項目なのにdivでいいのかと自問してます。
簡単なようでいて難しいですね。

補足日時：2011/09/23 11:02

この回答へのお礼

３つも回答が来て、どうも有り難うです。
僕もまだ未検証です。
取り敢えず皆様にお礼をしておきます。

お礼日時：2011/09/22 14:51

No.2 回答者： ORUKA1951 回答日時： 2011/09/22 09:15

擬似要素:beforeとcontentプロパティを使いましょう。

<div class="nav">
　<ul>
　　<li><a href=""></a></li>
・・の場合
div.nav ul,div.nav ul li{list-style:none; display:block; margin:0;padding:0;}
div.nav ul li{margin:left:60px;}
div.nav ul li:before{content:url(画像URL);position:relative;top:-20px;}
とか・・

この回答へのお礼

なんか複雑ですね。達人みたいです。
でも、４行目まで自分のソースに近かったします。
意外と相性がいいかもしれません。

お礼日時：2011/09/22 14:49