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

Question

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

我是否将标签的底部与 <input> 的内容对齐？或者我将标签的底部与 <input> 的底部对齐标记自己？您也可以举一些例子吗？

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

谢谢。

Answer 1

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

这种对齐有一些常见的模式(至少这两种我经常看到):

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

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

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