如何正确对齐表单标签？

Posted 2023-03-05

【中文标题】如何正确对齐表单标签？

【英文标题】：How To Align Form Tags Properly?

【发布时间】：2011-11-28 14:50:04

【问题描述】：

我想将输入和表单元素向右对齐并将标签信息向左对齐，同时保持标签与每个对齐的输入垂直居中。我还需要在每个 <li> 标签之间留一些空间。

你可以在这里查看我在谈论和询问的内容...http://jsfiddle.net/CCxwF/

【问题讨论】：

我一般喜欢把<input>放在<label>里面，把输入浮动到标签里面。

+1 @Rikudo。这是规范允许的，它比人们用<p>

之类的标签包装表单要好得多

发布了我的工作答案。很好的问题，但许多开发人员寻求正确的方式来做你所寻求的。 +1 和喜欢的

【参考方案1】：

试试这个 CSS：

label display: block; margin: 5px 10px; float: left; width: 200px;
input, select float: left; width: 150px;
ul li clear: both;
input.checkbox width: inherit; margin: 5px 0 0 0;

将未分类的标签结束标记更改为复选框输入之前，并将类checkbox添加到复选框

如果你想在复选框周围保留标签，你可以使用这种样式：

label display: block; margin: 5px 10px; float: left; width: 200px; position: relative;
input, select float: left; width: 150px;
ul li clear: both;
input.checkbox width: inherit; margin: 5px 0 0 0;

【讨论】：

type="checkbox" 输入看起来不正确，至少在 Chrome 中是这样，但这非常接近。

【参考方案2】：

我已经完全删除了<ul>，在<label>s 上设置display: block 就可以了。

Example

在此示例中，每个<label> 都设置为block 级别元素，并且每个<input> 或<select> 都设置为在其中浮动。黑线只是为了清楚起见（只是为了让您可以看到标签是什么）。

【讨论】：

将控件放在标签内可以让您不必将它们与 for/id 匹配（我不喜欢 for，因为它提升了 iditis）。

文字也可以放在span内，让定位更加灵活。

【参考方案3】：

我个人喜欢使用定义列表（尽管这不会垂直对齐您的 <label>。

见：http://jsfiddle.net/Wexcode/CCxwF/5/

您可能还想考虑将id 属性添加到表单中的元素，并执行label for="element-id"

【讨论】：

其实根本不需要列表，表单不是列表，也不是定义，也不是（未）排序的列表。

@Rikudo：最简单的形式是输入的集合。无序列表或定义列表对此具有完美的语义意义，这就是为什么有大量专业人士以这种方式设计表单的原因。