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

php中文网
发布: 2016-06-24 12:18:15
原创
2601人浏览过

一个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"  设置样式不行吗

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号