html - 没有CSS或表格对齐复选框？

Question

如果我有如下的 html 表单:

<form name="statusForm" action="post.php" method="post" enctype="multipart/form-data">
Test:
<input name="checkboxes[]" value="Test" type="checkbox">
<br>
TestTestTest:
<input name="checkboxes[]" value="Test" type="checkbox">
<br>
TestTestTestTestTestTest:
<input name="checkboxes[]" value="Test" type="checkbox">
<br>
TestTestTestTestTestTestTestTestTestTestTest:       
<input name="checkboxes[]" value="Test" type="checkbox">
<br>
<input name="Submit" value="submit" type="submit">
</form>

是否可以不使用表格或 css 而使用纯 html 来对齐复选框，使它们联合在一起？否则，应该使用哪个 css？

Answer 1

是的。用 <label> 包围每个标签标签:

<label for="checkboxes1">Test:</label>
<input id="checkboxes1" name="checkboxes[]" value="Test" type="checkbox">

然后给标签一个宽度:

label {
    display: inline-block; /* try "block" instead if this fails in IE */
    min-width: 5em;
}

这应该很好地填充文本框。作为一个额外的好处，点击标签现在应该将浏览器焦点放在文本框中。