今まであまり使う機会がなかったんだけど、
<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サンプルブログ
<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サンプルブログ