display:inline-blockが横並びにならない意外な原因と解決方法

display:inline-blockが横並びにならない

とある項目を等幅で横並びにしたい時、【display:inline-block】を使うことがあるかと思います。
この時、display:inline-blockが横並びにならず、苦戦したことはありませんか？

例えば、【「width:50%」にして、項目を2つ横並びにしたい】のですが、実際には横並びにならない。こんな現象に遭遇したことがある人もいるかと思います。

例えば、以下のHTMLとCSSをご覧ください。

HTML

CSS

コードを見た限りでは、横並びになるはずなのですが、実際には横並びになりません。

どこに問題があるのでしょうか？

display:inline-blockが横並びにならない原因と解決方法

パッと考えると、親要素のCSSが影響しているのかと疑ってしまうかと思います。
もちろん、その場合もありますが、実は「HTML」の記述が原因になっている場合もあるのです。

詳しく言えば「HTMLの改行」が原因です。

display:inline-blockが横並びにならない時、HTMLのコードを改行せずに記述することで、問題が解決することがあります。

以下のようにHTMLを修正してみましょう。

↓

HTMLを上記の様に改行のない状態に書き換えると、問題が解決するかもしれません。
親要素のCSSが悪さをしていなければ、問題は解決するはずです。

まとめ

display:inline-blockが横並びにならない理由と解決方法をご紹介しました。

正常に横並びにならないとCSSの記述を疑いがちですが、HTMLに含まれる改行が原因担っている場合もあります。HTMLの改行をなくしてやれば、問題が解決するかもしれません。

お困りの方があれば、試してみてください。