Как сделать инпуты ровно?

Question

[JackShcherbakov]

Здравствуйте есть вот такой код https://jsfiddle.net/CitizenOne/gkLg2hLm/3/
Надо каким-то образом сделать все ровненько, но меня какбуд-то бы молнией ударило и я не могу сделать то, что делал более полугода. Надо что бы было примерно так.

Answer 1

[Twelfth Doctor]

Решение "в лоб" с помощью тега<br>
https://jsfiddle.net/gkLg2hLm/4/

Comments

[JackShcherbakov]

О боже! ТОЧНО! Как же я мог забыть! Я всегда так делал! И старые серипты просматиривал этого br не заметил! Спасибо большое!

[Андрей]

Зачем это тут? br не для этого ведь создан:
https://www.w3.org/TR/html5/text-level-semantics.h...

[Матвей Правосудов]

Решение работает, но семантически правильно будет использование блочных тегов.

Answer 2

[Матвей Правосудов]

Вам нужно обернуть лейбл+инпут в один div. Так как у лейблов и инпутов display: inline-block, они будут в одну строчку. Например, вот так:

<div>
    <label for="name">Имя</label>
    <input type="text" name="name" id="name" placeholder="Введите имя">
</div>

И так для каждой группы лейбл+инпут.

Answer 3

[Юрий Есин]

label {
  display: inline-block;
  vertical-align: middle;
  width: 45%;
  box-sizing: border-box;
}

input:not([type="radio"]) {
  display: block;
  width: 100%;
}

В HTML у вас чуть-чуть ошибочка, там не совсем правильно обрамили радио, нужно открывающий тег перенести ниже, за предыдущий label.
Если нужно выровнять в одну горизонтальную линию еще и надписи к полям ввода, текст надписи тоже нужно обрамить тегом и сделать его вместе с input display: inline-block, а так же зафиксировать ширину, чтобы это всё не плавало.