tdのチェックボックスを左揃えにするにはどうすればよいですか? ? _html/css

tdのチェックボックスを左揃えにするにはどうすればよいですか? ? _html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 12:18:15

オリジナル

2367 人が閲覧しました

TD の場合、幅は固定 (たとえば 230px) ですが、高さは縮小できますが、それは問題ではありません。

この td には表示されるチェックボックスが N 個あり、チェックボックスの後に表示される文字の長さも不定です
たとえば、漢字が 4 文字あるものもあれば、2 文字あるものもあります。

チェックボックスをすべて左揃えにするにはどうすればよいですか?

IE6で左揃えで表示するだけで済みます。

ディスカッションへの返信 (解決策)

Text

チェックボックスとテキストを折り返さないようにする場合は、div をspan に変更し、span の間に +br を付けます。

私はこれを達成しました、2つの方法を共有します。

方法 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 コード?12345678910111213141516171819202122232425262728293031323334353637 1 つ目のタイプについては、言葉を失います。2 つ目のタイプについては、IE7 以前のバージョンではインラインブロックがサポートされていないことを思い出していただきたいと思います。

style="text-align:left"

スタイルを設定することはできませんか？