IT女子のお気に入りフォルダ

管理人の備忘録と実践を兼ねた(出来るだけ)役に立つ情報を配信するブログです。

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

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

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

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

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

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