テキストが改行してもラジオボタンに回り込まず揃える方法(横幅指定はしない)

  • 公開日:2016/11/10
この記事は最終更新日から7年以上が経過しています。

ラジオボタン(またはチェックボックス)のラベルが改行するほど長い場合。テキストがラジオボタンの下にまで回り込んでしまいます。
やっぱり回り込まずに行頭を揃えたいことが多いです。
また、テキスト部分の横幅も固定ではなくフレキシブルに対応したい。
というわけで、その方法です。

HTMLのポイント
テキスト部分をpタグで囲みます。
横幅固定でなくフレキシブルに対応していることを確認できるよう.box1と.box2を用意しました。

CSSのポイント
まず、ブラウザ依存のスタイルの相違をなくすためにリセットしています。(※今回の必要最低限しかリセットしていません。)
.box1と.box2の横幅を適当にセットしました。

肝心のテキストを回り込ませずに揃える部分ですが、
まず、ラジオボタンのinputとテキストを部分のpタグはfloatさせます。float解除は:afterでやってます。
pタグ部分のwidthにcalcを使用します。これでどんな幅でも大丈夫というわけです。

なかなかシンプルに対応できたと思います。