list-style-image

質問

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

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

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

回答No.1

yui56544 · ベストアンサー

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

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

お礼

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

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

回答No.3

神崎 渉瑠（@taloo）

>テキストを中央にして、
>abcdeと図の間を１文字分くらい

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

未検証です。

お礼

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

補足

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

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

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

回答No.2

ORUKA1951

擬似要素: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;}
とか・・

お礼

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