ホームページ覚書 » 横並びメニューにはdisplay: inline-block;で対応

HTML・Wordpressなどの覚え書きブログ

横並びメニューにはdisplay: inline-block;で対応

リストタグを回り込みして横並びのメニューを作っていたときにブラウザごとで表示が異なったのでメモメモφ(.. )

IE７以降や、Firefox・Chrome・Sleipnir・Safari・Operaでは問題なかったのですが、IE６以下では、回り込みすらせず、親要素の幅まで広がってしまった。

横並びにしたいブロック要素の幅を固定にすれば問題は解決できるのですが、今回は使う人によってテキストの長さが変わるという状況であったため、幅は固定せずに実装したかった。

そこで<li>タグのdisplayプロパティにinline-blockを指定することで、テキストに応じた横幅の横並びメニューがIE６でも問題なく表示することができました。