несколько горизонтально выровненных полей ввода с вертикально выровненными надписями внизу

Question

Я хочу создать форму, похожую на эту.

В частности, я хочу научиться размещать поля ввода разных размеров в одной строке с вертикально выровненными метками внизу. Например, в разделе «Имя» формы есть поле для «первого» и «последнего».

Как это можно сделать с помощью HTML и CSS?

Answer 1

Образец формы содержит элементы SPAN со свойством display, установленным на inline-block, а каждый из элементов INPUT и LABEL имеет значение свойства отображения block с фиксированным размером. Таким образом, вы в основном создаете ячейки, содержащие ваши элементы и их метки.

Того же можно добиться с помощью комбинации TABLE / TR / TD, хотя это будет немного старомодно и поэтому не рекомендуется.