xhtml

チェックボックスとテキストをキレイに揃える方法をメモ。
参考にしたサイト
http://phpspot.org/blog/archives/2009/03/css_79.html
http://www.xinotes.org/notes/topic/437/
まずは xhtml の記述

<form>
<div style="width:350px">
	<input type="checkbox" id="cb" /><label for="cb">らべる1</label><br/>
	<input type="checkbox" id="cb2" />
	<label for="cb2">サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル	</label><br/>
	<input type="checkbox" id="cb3" />
	<label for="cb3">サンプルサンプルサンプルサンプルサンプルサンプル サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</label><br/>
	</div>
</form>

次に css の記述

input {
	display: block;
	float: left;
	clear: left;
	height: 12px;
	padding: 0;
	margin: 0;
}
label {
	display: block;
	clear: none;
	width: 300px;
	font-size: 12px;
	font-family: sans-serif;
	margin-left: 20px;
}

ポイントは clear の使い方ですね。 勉強になります。

==アイコン素材PR==
注目！,スタンプ,ハンコ,はんこ,印鑑 新商品,スタンプ,ハンコ,はんこ,印鑑 新企画！,スタンプ,ハンコ,はんこ,印鑑 新感覚！,スタンプ,ハンコ,はんこ,印鑑 新食感！,スタンプ,ハンコ,はんこ,印鑑 ポイント２倍！,スタンプ,ハンコ,はんこ,印鑑 ポイント還元,スタンプ,ハンコ,はんこ,印鑑 結果発表！,スタンプ,ハンコ,はんこ,印鑑 新着情報！,スタンプ,ハンコ,はんこ,印鑑 リニューアル中,スタンプ,ハンコ,はんこ,印鑑