記事の詳細

グローバルナビなど、要素を横並びにしたいときに、floatを使って横並びにすることが多いと思いますが、僕は今回紹介する「display:inline-block;」を使う方法を知ってからはこっちを良く使うようになりました。

floatを使った横並びについて

まずはfloat:left;を使って横並びにする場合

captcha01
このようにfloatでも横並びになります。
ただ、このままだと次に続く要素が崩れてしまうため、clear:both;で回り込みの解除をする必要があります。
これが結構めんどうだったりします。

display:inline-blockを使う場合

先ほどのliにfloatではなくdisplay:inline-block;を指定します。

captcha02
するとこのようにdisplay:inline-block;でも横並びになりました。

display:inline-block;なら回り込みの解除も必要ないので簡単です。

あれ?隙間ができてしまう?

先ほどの画像を見るとわかるのですが、要素と要素の間に隙間ができてしまいます。

レスポンシブウェブデザインなどで、均等に5等分で表示させるためにwidth:20%;を指定してみましょう。

captcha03
隙間ができた分、ずれてしまいました。

ulにfont-size:0;を使う

ずれを修正するには、ulにfont-size:0;を指定して、liに実際のfont-sizeを指定します。

captcha04
無事修正できました。

以上、floatを使わずに要素を横並びにする方法でした。
簡単に実装できるのでぜひ試してみてください。

今回、参考にした記事はこちら
[CSS]ナビゲーションやリストなど、inline-block要素の間にできる隙間を解決する方法
【CSS】ul,olのリストを横並びにするときにfloatじゃなくてdisplay:inline-blockを使う方法

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。


ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

相模原のお店やサービスをどんどん紹介!

行ってみよう相模原 相模原市のお店限定

飲食店

ページ上部へ戻る