記事の詳細

グローバルナビなど、要素を横並びにしたいときに、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を使う方法

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

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

The following two tabs change content below.
唐澤 章三

唐澤 章三

代表取締役インクループ株式会社
弊社代表。UXデザインの講師を専門学校で務めており、心理学に基づくデザインを実践している。実家が焼肉屋ということもあり、幼い頃からの経験に基づく顧客心理を活用した広告展開、運用を得意とする。

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

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

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

お知らせ

平成28年度補正予算 小規模事業者持続化補助金

特集

エクセルトラブルと解決策のまとめ アクセス数を増加させるための方法まとめ 初心者向けWordPressの設定方法まとめ

AD

ページ上部へ戻る