Home >Web Front-end >HTML Tutorial >How to make the checkbox in td left aligned? ? _html/css_WEB-ITnose
How to make the checkbox in td left aligned? ? _html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:18:152405browse
For a td, the width is fixed, for example 230px, and the height can be retracted, it doesn’t matter.
There are N checkbox boxes to be displayed in this td, and the length of the characters displayed after the checkbox is also uncertain.
For example, some have 4 Chinese characters, some have 2 Chinese characters, etc.
What should I do to ensure that the checkboxes are all left-aligned?
only needs to be displayed left-aligned in IE6.
Reply to discussion (solution)
b6c5a531a458a2e790c1fd6421739d1c
80966396f4640b35c6d1aaf6b4739b22
7f579a03627e69fc3db34592940305344c6588ac3a1f18b9b2ebe4501101ad5btext8c1ecd4bb896b2264e0711597d40766c
16b28748ea4df4d9c2150843fecfba68
b90dd5946f0946207856a8a37f441edf
If checkbox and text are required If you don’t want to wrap the line, change the div to span and br between spans.
I have implemented it, 2 methods, I will share with you.
Method 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> Method 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>
I have implemented this, 2 methods, share with everyone.
Method 1:
XML/HTML code?1234567891011121314151617181920212223242526272829303132333435363705fa6ed139b2521231f706e9ff0ef818 100db36a723c770d327fc0aef2ce13b193f0f5c25f18dab9d176bd4f6de5d30e
style="text-align:left" Isn’t it possible to set the style?