How to make the checkbox in td left aligned? ? _html/css

How to make the checkbox in td left aligned? ? _html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:18:15

Original

2373 people have browsed it

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)

text

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>

Copy after login

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>

Copy after login

I have implemented this, 2 methods, share with everyone.
Method 1:
XML/HTML code?12345678910111213141516171819202122232425262728293031323334353637 The first one makes me speechless. The second one I want to remind you that inline-block is not supported in IE7 and lower versions.

style="text-align:left" Isn’t it possible to set the style?