多个水平对齐的输入框，下方有垂直对齐的标签

Question

我想创建一个类似于this one.

的表单

特别是，我想学习如何将不同大小的输入框放在同一行，下面是垂直对齐的标签。例如，在表单的“名称”部分中，它有一个“第一个”和“最后一个”的框。

如何使用HTML和CSS执行此操作？

Answer 1

您的示例表单包含display属性设置为inline-block的SPAN元素，而INPUT和LABEL元素的显示属性值均为block，且大小固定。这样，您基本上就是创建包含元素及其标签的单元格。

使用TABLE / TR / TD组合可以实现同样的目的，虽然它有点过时，因此不推荐。