如何让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