首页 >web前端 >html教程 >如何让td中的checkbox左对齐??_html/css_WEB-ITnose

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

WBOY
WBOY原创
2016-06-24 12:18:152389浏览

一个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">あsasあs化fdふぁ</label> 			<label><input type="checkbox">ふぁあdふぁsdふぁsふぁ</label> 			<label><input type="checkbox">あえr</label> 			<label><input type="checkbox">123123123123123123123123123123123123123123</label> 			<label><input type="checkbox">あdfさsdふぁ</label> 			<label><input type="checkbox">あsdふぁ</label> 			<label><input type="checkbox">ふぁふぁ</label> 			<label><input type="checkbox">あえあsdふぁsdfr</label> 			<label><input type="checkbox">aaaa</label> 			<label><input type="checkbox">さふぁ</label> 			<label><input type="checkbox">あsdふぁ</label> 			<label><input type="checkbox">ふぁふぁ</label> 			<label><input type="checkbox">あえr</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