多个与垂直对齐的标签水平排列的输入框下方

Question

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

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

你怎么用HTML和CSS做到这一点？

Answer 1

您的示例表单包含与display属性设置为inline-block的SPAN元素，并且INPUT和LABEL元素各自具有显示属性值block，具有固定大小。这样，你基本上就是在创建单元来包含你的元素和标签。

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