ホームページ >ウェブフロントエンド >htmlチュートリアル >tdのチェックボックスを左揃えにするにはどうすればよいですか? ? _html/css_WEB-ITnose
tdのチェックボックスを左揃えにするにはどうすればよいですか? ? _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:18:152368ブラウズ
TD の場合、幅は固定 (たとえば 230px) ですが、高さは縮小できますが、それは問題ではありません。
この td には表示されるチェックボックスが N 個あり、チェックボックスの後に表示される文字の長さも不定です
たとえば、漢字が 4 文字あるものもあれば、2 文字あるものもあります。
チェックボックスをすべて左揃えにするにはどうすればよいですか?
IE6で左揃えで表示するだけで済みます。
ディスカッションへの返信 (解決策)
b6c5a531a458a2e790c1fd6421739d1c 80966396f4640b35c6d1aaf6b4739b22
6d4706ece3946842e8b1a4188a5f1875213a454fe80de5535f76351cf21bb83fText8c1ecd4bb896b2264e0711597d40766c
16b28748ea4df4d9c2150843fecfba68
b90dd5946f0946207856a8a37f441edf
チェックボックスとテキストを折り返さないようにする場合は、div をspan に変更し、span の間に +br を付けます。
方法 1:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head> <title>Untitled</title> <style> label{ white-space:nowrap; } </style></head><body><table border=1> <tr> <td width="350px" style="layout-grid-type: strict;"> <label for='a1'><input id='a1' type="checkbox">さふぁ</label> <label><input type="checkbox">あｓasあs化fｄふぁ</label> <label><input type="checkbox">ふぁあｄふぁｓｄふぁｓふぁ</label> <label><input type="checkbox">あえｒ</label> <label><input type="checkbox">123123123123123123123123123123123123123123</label> <label><input type="checkbox">あｄｆさｓｄふぁ</label> <label><input type="checkbox">あｓｄふぁ</label> <label><input type="checkbox">ふぁふぁ</label> <label><input type="checkbox">あえあｓｄふぁｓｄｆｒ</label> <label><input type="checkbox">aaaa</label> <label><input type="checkbox">さふぁ</label> <label><input type="checkbox">あｓｄふぁ</label> <label><input type="checkbox">ふぁふぁ</label> <label><input type="checkbox">あえｒ</label> </td> </tr></table></body></html> 方法 2:
<div style="width:200px;border:1px solid;"><span style="display:inline-block"><input type="checkbox" name="chkJobType" id="1" />你好中国中国中国</span><span style="display:inline-block"><input type="checkbox" name="chkJobType" id="2" />你</span><span style="display:inline-block"><input type="checkbox" name="chkJobType" id="2" />你中</span><span style="display:inline-block"><input type="checkbox" name="chkJobType" id="2" />你好中国中国中国中国中</span><span style="display:inline-block"><input type="checkbox" name="chkJobType" id="2" />你好</span></div>
これを 2 つの方法で実装し、みんなに共有します。
方法 1:
XML/HTML コード?123456789101112131415161718192021222324252627282930313233343536372ec4f0c40922fd9a1c0048c2572d6ba993f0f5c25f18dab9d176bd4f6de5d30e
スタイルを設定することはできませんか？