对齐没有CSS或表格的复选框?

时间:2009-05-21 23:47:03

标签: html css

如果我有如下的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?

5 个答案:

答案 0 :(得分:5)

烨。使用<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;
}

这应该很好地填充文本框。另外,点击标签现在应该将浏览器焦点放在文本框中。

答案 1 :(得分:1)

文章Applying CSS to forms有一些syling标签示例,可以使右边的输入沿垂直边缘排列。

也就是说,用户界面设计中的常规是将标签放在右侧或单选按钮和复选框上。如果您遵循该约定,那么它们将自行排列(因为所有复选框将共享宽度)。

答案 2 :(得分:1)

您可以将标签和输入放在无序列表中。为了获得对齐,文本必须位于输入/

的右侧
<ul>
    <li>
        <label><input /> Some Text</label>
    </li>
</ul>

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

答案 3 :(得分:0)

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

它不符合你的无css指令,但如果你真的不想要外部 css,你可以使用内联样式。

也许您可以使用&nbsp;

CSS(以及较小程度的表格)是您正在寻找的工具。

编辑:另一种可以做到这一点的方法是使用鬼像素图像。图像是1x1 alpha透明png,并使用高度和宽度属性来告诉它你想要多少空间。您可能需要一些内联css来确保正确清楚。

答案 4 :(得分:0)

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

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