对齐没有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;
}

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

Answer 2

文章Applying CSS to forms 提供了一些样式标签示例，以使右侧的输入沿垂直边缘排列。

也就是说，将标签放置在右侧或单选按钮和复选框是用户界面设计的惯例。如果您遵循该约定，那么它们将自行排列（因为所有复选框将共享一个宽度）。

Answer 3

你可以把你的标签和输入放在一个无序列表中。为了得到对齐，文本必须在输入的右边/

<ul>
    <li>
        <label><input /> Some Text</label>
    </li>
</ul>

或

<ul>
    <li>
        <input /><label for="">Some Text</label>
    </li>
</ul>

丰富

Answer 4

最简单的方法就是将它们全部向右对齐。我不确定“align”属性是否适用于表单元素，但您可以尝试一下，或者使用 align="right" 将代码包装在 div 或 p 元素中。

CSS 是一个更好的解决方案。在表单上放置一个类，然后使用 CSS 规则 text-align: right; 或直接将 style="text-align: right" 添加到表单元素。

Answer 5

我不明白你为什么要这样做。

它不符合您的 no css 指令，但如果您真的不想要 external css，您可以使用内联样式。

也许你可以使用 

CSS（以及较小程度上的表格）是您正在寻找的工具。

编辑：另一种方法是使用鬼像素图像。图像是 1x1 alpha 透明 png 并且您使用 height 和 width 属性来告诉它您想要多少空间。您可能需要一些内联 css 来确保事情正确清晰。