多個與垂直對齊的標籤水平排列的輸入框下方

Question

我想創建一個類似於this one.

特別是一個形式，我想學習如何把不同大小的輸入框與下方垂直對齊的標籤在同一行。例如，在表單的「名稱」部分中，它有一個「第一個」和「最後一個」的框。

你怎麼用HTML和CSS做到這一點？

Answer 1

您的示例表單包含與display屬性設置爲inline-block的SPAN元素，並且INPUT和LABEL元素各自具有顯示屬性值block，具有固定大小。這樣，你基本上就是在創建單元來包含你的元素和標籤。

使用TABLE/TR/TD組合可以實現同樣的效果，雖然它會有點過時，因此不推薦。