floatの代わりにinline-blockを使う

横並びで表示させたいときに、高さが違っても大丈夫なので便利。

inline-blockを使う上で幾つか注意点

IE7用
cssで

#sample{
display:block;
*display:inline;
*zoom:1;
}

横並びにすると改行の分、余計なスペースが入る
親要素のletter-spacingで調整

例えば、ul liで使う場合。

ul{
letter-spacing: -.40em;
}
ul li{
display:block;
*display:inline;
*zoom:1;
letter-spacing: normal;
}

という感じ。

弱点

横並びにするときに、右側ピッタリにする必要がある場合は、面倒なのでfloatを使った方が楽かも。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする