チェックボックスのチェックとテキストがばらばら

質問

ASP.NETのチェックボックスやラジオボタンなどで、
CSSを使って以下のように、位置を指定したところ、

left: 100px; top: 10px;
position: absolute;

□Textや○Textが丸ごと移動するのではなく、

チェック部分□や○
だけが指定した部分に表示され、
テキスト部分は全く動きません。
（つまりばらばらに表示されてしまいます。）

これを一緒に移動、表示することは可能でしょうか?

回答No.1

WebSurfer · ベストアンサー

> チェック部分□や○
> だけが指定した部分に表示され、
> テキスト部分は全く動きません。

ASP.NET のサーバーコントロールの CheckBox の話ですよね？

であれば、そのようなことはないはずです。例えば、以下のよ
うにすれば、

.style1
{
left: 100px;
top: 10px;
position: absolute;
}

<asp:CheckBox ID="CheckBox1" runat="server" Text="check box" CssClass="style1" />

生成される html コードは以下のようになるはずです。

<span class="style1">
<input id="CheckBox1" type="checkbox" name="CheckBox1" />
<label for="CheckBox1">check box</label>
</span>

これで input（チェック部分□）と label（テキスト部分）がば
らばらに表示されることはあり得ないです。

IE9 の開発者ツールで ASP.NET が生成した CheckBox の html コー
ドにスタイルがどのように適用されているか調べてみてください。