JackShcherbakov
@JackShcherbakov

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

Здравствуйте есть вот такой код https://jsfiddle.net/CitizenOne/gkLg2hLm/3/
Надо каким-то образом сделать все ровненько, но меня какбуд-то бы молнией ударило и я не могу сделать то, что делал более полугода. Надо что бы было примерно так.92f9f4c3589a4ff48beeef95b19c0105.jpg
  • Вопрос задан
  • 166 просмотров
Решения вопроса 1
Решение "в лоб" с помощью тега<br>
https://jsfiddle.net/gkLg2hLm/4/
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
oxyberg
@oxyberg
Продуктовый дизайнер ВКонтакте
Вам нужно обернуть лейбл+инпут в один div. Так как у лейблов и инпутов display: inline-block, они будут в одну строчку. Например, вот так:
<div>
    <label for="name">Имя</label>
    <input type="text" name="name" id="name" placeholder="Введите имя">
</div>

И так для каждой группы лейбл+инпут.
Ответ написан
Exomode
@Exomode
Архитектор ПО
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, а так же зафиксировать ширину, чтобы это всё не плавало.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы