ジーニアスブログ – WEB制作会社ジーニアスウェブのお役立ちブログ

inline-blockで横並びにしたらカラム落ちしてしまった!簡単な解決法をご紹介!

こんにちは。
ジーニアスウェブの米田です。

コーディング初心者にとって、要素の横並びはつまずくポイントの1つではないでしょうか。
実際自分もそのひとりです。

レスポンシブ化が必須になってきている今、可変対応できるものでないとなりません。
今回はinline-blockで横並びにした際、カラム落ちしてしまう現象についてご紹介します。

なぜカラム落ちしてしまうのか

今回はこのリスト要素をinline-blockにして横並びにしたい。
li要素にdisplay:inline-blockとwidth:33.333%を指定。

ところが、、、、

カラム落ちしている!!

今回は余白なしのレイアウトだから分かりやすいが、
余白を指定していると気づきにくい。

なぜこのような余白ができてしまうのか。

実はこの改行が半角スペース分として、余白ができてしまうのです。
これはやっかいですね。

簡単な解決策をご紹介します。

01記述方を変える

これなら余白はできませんが、少し不恰好。。。

02親要素のfont-sizeを0にしてしまう

親要素のfont-sizeを0にし、子要素で再度font-sizeを指定することで、余白を消すことができます。
ただfont-sizeを%指定したい場合、この方法は使えません。

03親要素の文字間を詰める

これならfont-sizeが100%でも問題ありません。

これで無事、カラム落ちせず横並びにすることができました。

最後に

横並びは簡単そうにみえて奥が深いです。
他にもfloatやflexboxなどを使いこなすことができれば、
自由自在にレイアウトすることができるようになるでしょう。

「コーディング」に関する記事一覧はこちら