垂直对齐字段和表单中的值

Question

在表单中的同一<input>中垂直对齐字段标签（自由文本）和表单元素（例如<tr>）的最佳做法和最便携的方法是什么？

我是否将标签的底边与<input>的内容对齐，还是对齐标签的底边和<input>标签本身的底边？你能举一些例子吗？

我的客户没有具体要求，所以我只想遵循行业标准。

感谢。

Answer 1

@Oded是对的，没有行业标准。事实上，在设计领域，任何标准都是非常主观的。

这种对齐有一些常见的模式（至少我经常看到这两种模式）：

1）。在一行中，label左侧和input（或其他元素）位于右侧。根据设计，反之亦然。在这种情况下使用vertical-align css规则很方便。我更喜欢基线或中间垂直对齐。

2）。 label位于相应的表单元素之上。在这种情况下，最简单的方法是在标签上使用display:block。反之亦然（标签低于表单元素）通常被认为不是用户友好的（至少我真的这么认为）。

重要：不要忘记在for标记中使用label属性，并在表单元素上使用相应的id属性。这实际上是一种行业标准。

Answer 2

没有“行业标准”。

你做的设计看起来很不错。

我倾向于将所有标签与“顶部”对齐，因此很清楚标签与输入的关系 - 对于我在标签中有文本区域或大量文本的情况（即解释性文本的加载）。