要素を横並びにするのには float を使用すると思います。
最近は flex も非常に便利で、私も新規案件ではもっぱら flex を多用していますが………それでもまだまだ float も現役ですよね！！
float 使いこなせるとかっこいいしね！（？）
今回は、その float をしてるのに、「float が効かないよー」「横並びにならないよー」というときのトラブルシューティングをしていきたいと思います◎
並べたい要素にfloatがかかっているか
もうまず第一にこれを確認してほしい。
大前提だと思うんですが確認してほしい。案外見落としていたりします。
綴りミスをしていないか、全角スペースが混ざっていないかを含め、再度きちんと指定がされているか確認してみましょう。
親要素の幅は足りているか
案外見落としがちなのがこちら。
たとえば、親要素の幅が200pxなのに、
入れたい子要素の幅が合計300pxとかだと、親要素に収まり切りませんね。なのでこの場合は横並びになりません。
padding左右や、margin左右、border左右分まで、しっかり計算して親要素内に収まるかを確認しておくことがだいじ！
htmlに全角スペースがはいっていることで要素の幅がcssより大きくなっていないか
うっかり陥りがち＆陥ると気付かないミスです。
なんかうまいこと横並びにならないなー、floatも書いてあるしcss上での幅も足りてるのに…というあなた、
htmlに全角スペースが混じっていませんか…？
cssで確保してある幅よりも、検証ツールで確認できる領域が大きい場合、高確率で全角スペースが紛れ込んでます。
これは確認の余地大ありなので、確認してみてください。
全角スペースはエディタで可視化できるようにしておくのがお勧めです！
参考記事はこちら↓
問題が発生したときのため、可能性の引き出しをたくさん持っておいて損はありません★
それでは皆様よいコーディングライフを～～！
