裏アドだらけの人生

読んでおもしろい内容はほとんどない個人的な備忘録です

メニューのリストでwhite-space

2012-09-24 06:23:14 | CSS
今まであまり使う機会がなかったんだけど、

<ul>
<li><a href="aaa.html">AAA</a></li>
<li><a href="bbb.html">BBB</a></li>
<li><a href="ccc.html">CCC</a></li>
<li><a href="ddd.html">DDD</a></li>
</ul>

みたいなよくあるメニューのリストをCSSでliのwidthを指定せずに

li { float: left; }

ってして横並びにすると、ulの横幅に収まらなくなったliは自動的に次の行に折り返してくれる。
ただこれがIEだと、横幅が足りないとか関係なく、入る分の領域にliの要素を改行してでも入れ込んじゃうみたいでタチが悪い。
そんな時に white-space が使えるってのをはじめて知った。
CSSで

li { float:left; white-space: nowrap; }
a { display: block; }

ってするとIEでもちゃんとliを折り返してくれる。
これほんと便利。

参考: CSSサンプルブログ

1 コメント

コメント日が  古い順  |   新しい順
なるほどぉ~ (adblack)
2012-11-07 21:00:43
勉強になります~♡
返信する

コメントを投稿