“表”与标签内的输入形成对齐

Question

我想避免对每个表单元素使用id。但我也想保留表格布局。

将输入放在标签内时，

<label>在没有id的情况下工作：

<label>Something: <input type="text" ... /> </label>

但现在它很难做出输入或标签内容浮动到两侧使它看起来像一张桌子。我一直在尝试输入margin: auto。 Without any success.

你说什么？

Answer 1

您可以使用table并为包含标签的列创建具有特定宽度的类。

form.myform table tr td.label {
    width:100px;
}

Check this link

Answer 2

我建议使用带ID的正确标记，如果你不想为每个元素写ID，可以创建一个简单的jQuery或JS函数，为标签分配for属性，为输入分配等效id领域。

Answer 3

我建议你不要把input元素放在label元素中。 Label有一个名为“for”的属性，所以你应该这样做：

<table>
    <tr>
        <td><label for="myInput"></label> <input id="myInput"/></td>
    </tr>
</table>

如果您不想使用表格进行对齐，您还可以使用div的部分来构建类似于表格的布局。