ここから本文です

list-style-imageが、リストを横並びにした時点(floatにしろinlineにしろ)で消えて...

octk22ms58さん

2011/12/2711:49:39

list-style-imageが、リストを横並びにした時点(floatにしろinlineにしろ)で消えてしまいます。

以下がソースです。

~html~
<ul id="topmenu">
<li class="logo1"><a href="#">お問い合わせ</a></li>
<li class="logo2"><a href="#">サイトマップ</a></li>
</ul>

~css~
#topmenu ul,#topmenu li{display: block;
list-style:none}

ul#topmenu {font-size: 1.2em}

ul#topmenu li {padding-left:60px;
float:left}

.logo1 { list-style-image: url("images/mail.png"); }
.logo2 { list-style-image: url("images/zisyaku.png"); }

padding、marginを広めに取っても、表示されません。どうしたら良いのでしょうか?

閲覧数:
3,391
回答数:
1

違反報告

ベストアンサーに選ばれた回答

potoooooooozさん

編集あり2011/12/2714:11:34

#topmenu ul,#topmenu li{display: block;
list-style:none}
を消して下さい。

横並びにした事が問題ではなく、li(#topmenu li)にdisplay:blockを設定している事が問題です。
list-style関連のプロパティはdisplay:list-item(liの初期値)となっている要素に対して使う事が出来ます。

参考:
12.6.2 リスト( 'list-style-type'特性, 'list-style-image'特性, 'list-style-position'特性及び 'list-style' 特性)
http://www.y-adagio.com/public/standards/tr_css2/generate.html#list...

liに対するdisplay:blockを消せばいいですが、list-style:noneを残す意味も無いのでどっちも消していいです。

質問した人からのコメント

2011/12/27 14:32:48

ありがとうございました。うまくいきました、floatだけでも横並びになってくれるのですね。

あわせて知りたい

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問や知恵ノートは選択されたID/ニックネームのMy知恵袋で確認できます。