ラジオボタンやチェックボックスでボタンの次に改行が入ってしまう現象の対応策を記述します。

改行が入ってしまう例

以下の様に記述するとラジオボタンやチェックボックスを表示させたとき、ボタンの次に改行が入ってしまうことがあります。
横並びで作っていたものをHTMLを修正しないで縦並びに変更しようとすると起こります。

HTML


<div id="sample01">
	<input type="radio" id="radio01" name="group01" value="01" checked /><label for="radio01">あいうえおかきくけこさしすせそたちつてとなにぬねの</label>
	<input type="radio" id="radio02" name="group01" value="02" /><label for="radio02">あいうえおかきくけこさしすせそたちつてとなにぬねの</label>
	<input type="checkbox" id="chk01" value="01" checked /><label for="chk01">あいうえおかきくけこさしすせそたちつてとなにぬねの</label>
	<input type="checkbox" id="chk02" value="02" /><label for="chk02">あいうえおかきくけこさしすせそたちつてとなにぬねの</label>
</div>

CSS


#sample01 input[type="radio"], #sample01 input[type="checkbox"] {
	display: block;
}
#sample01 label {
	padding-left: 16px;
}

これはボタンを縦に並べようとして、display:blockにしたことで起こります。
インライン要素のinputをブロック要素に変更しましたが、次のlabelはインライン要素のままなので改行されてしまいます。

対策するにはfloatを使用します

CSSのinputにfloat:leftを追加することで改行が入らなくなります。

HTML


<div id="sample02">
	<input type="radio" id="radio20" name="group20" value="01" checked /><label for="radio20">あいうえおかきくけこさしすせそたちつてとなにぬねの</label>
	<input type="radio" id="radio21" name="group20" value="02" /><label for="radio21">あいうえおかきくけこさしすせそたちつてとなにぬねの</label>
	<input type="checkbox" id="chk20" value="01" checked /><label for="chk20">あいうえおかきくけこさしすせそたちつてとなにぬねの</label>
	<input type="checkbox" id="chk21" value="02" /><label for="chk21">あいうえおかきくけこさしすせそたちつてとなにぬねの</label>
</div>

CSS


#sample02 input[type="radio"], #sample02 input[type="checkbox"] {
	display: block;
	float: left; ←これを追加します
}
#sample02 label {
	display: block;
	padding-left: 16px;
}

改行を入れない別の記述方法

inputをlabelやdivで囲むとfloatを使わなくても改行が入りません。
下の例は、labelでinputを囲んでいます。

HTML


<div id="sample03">
	<label><input type="radio" id="radio30" name="group30 value="01" checked>あいうえおかきくけこさしすせそたちつてとなにぬねの</label>
	<label><input type="radio" id="radio31" name="group30 value="02" >あいうえおかきくけこさしすせそたちつてとなにぬねの</label>
	<label><input type="checkbox" id="chk30" value="01" checked />あいうえおかきくけこさしすせそたちつてとなにぬねの</label>
	<label><input type="checkbox" id="chk31" value="02" />あいうえおかきくけこさしすせそたちつてとなにぬねの</label>
</div>

CSS


#sample03 label {
	display: block;
	line-height: 1.7;
}

labelはインライン要素なので、display:blockでブロック要素にしています。
labelの代わりにdivを使う方法もあります。divは元々ブロック要素なので何も変更がありません。