如何让td中的checkbox左对齐？？_html/css_WEB-ITnose-html教學-PHP中文網

回复讨论(解决方案)

首頁

web前端

html教學

如何让td中的checkbox左对齐？？_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:18 PM

一个td，宽度是固定的，比如说是230px，高度可以伸缩，无所谓。

有N个 checkbox框要显示在这个td里，checkbox后的显示字符长度也不确定，
比如说，有的是4个汉字，有的是2个汉字，等等。

该怎么弄，才能保障，checkbox都是左对齐的呢？

只需要在IE6中显示成左对齐即可。

回复讨论(解决方案)

文本

如果要求checkbox和文本不换行，那就把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 code?12345678910111213141516171819202122232425262728293031323334353637nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

第一种我很无语，第二种我要提醒你inline-block在IE7及更低版本是不支持的。

style="text-align:left" 设置样式不行吗

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn