Как без JS и таблиц сделать несколько input с label над ними?

Question

[Ночной Лис]

Как при помощи блочных элементов прилепить лейблы к input полям?
Как на примере, но ровнее :)


Если использовать<br /> и свойство float и закрепить поля внутри <label>, то следующий блок начинается на уровне <input>, а хотелось бы на уровне лейбла...

Answer 1

[Ankhena]

flexbox
https://jsfiddle.net/rpmqdxr7/

Answer 2

[Cyapa]

clear: both;
https://jsfiddle.net/c5b5sp11/

Но вообще есть решения и поэлегантнее. Я имею ввиду без float.

Answer 3

[Кирилл Ушаков]

Не совсем ясна проблема...

<label for="input1">
	<span>Поле</span>
	<input type="text" id="input1">
</label>
<label for="input2">
	<span>Поле</span>
	<input type="text" id="input2">
</label>
<label for="input3">
	<span>Поле</span>
	<input type="text" id="input3">
</label>
<label for="input4">
	<span>Поле</span>
	<input type="text" id="input4">
</label>

Comments

[Ночной Лис]

Есть Django форма которая наполняется из некой модели, в ней хочется закрепить поля как на рисунке, ваш к сожалению не закрепляет лейблы над инпутами :)

[Ночной Лис]

Лейблы разные, как и ширина полей, хотел узнать как это сделать без танцев и проще