Выравнивание инпутов в форме

Question

Выравнивание инпутов в форме

Рейтинг: 1Ответов: 1Опубликовано: 26.04.2023

Есть следующая форма:

Как выровнять, чтобы инпуты были строго друг под другом?

Правильно ли я сверстал структуру?

<form className='form'>

  <div className="city">
    <label htmlFor="city">Ваш город</label>
    <select id="city" name="city">
      <option value="moscow">Москва</option>
      <option value="st-petersburg">Санкт-Петербург</option>
      <option value="novosibirsk">Новосибирск</option>
      <option value="ekaterinburg">Екатеринбург</option>
      <option value="kazan">Казань</option>
    </select>
  </div>

  <hr className='line' />

  <div className="password">
    <label htmlFor="password">Пароль</label>
    <input type="password" id="password" name="password" required />
    <div className="password_descr">
      Ваш новый пароль должен содержать не менее 5 символов.
    </div>
  </div>

  <div className="password">
    <label htmlFor="password">Пароль еще раз</label>
    <input type="password" id="password" name="password" required />
    <div className="password_descr">
      Повторите пароль, пожалуйста, это обезопасит вас с нами на случай ошибки
    </div>
  </div>

  <hr className='line' />

  <div className="mail">
    <label htmlFor="email">Электронная почта</label>
    <input type="email" id="email" name="email" required />
    <div className="mail_descr">
      Можно изменить адрес, указанный при регистрации.
    </div>
  </div>

  <div className="agree">
    <div className="agree_title">Я согласен</div>
    <input type="checkbox" id="consent" name="consent" required />
    <label htmlFor="consent">принимать актуальную информацию на емейл</label>
  </div>

  <div className="btn">
    <button type="submit">Изменить</button>
    <div className="btn_descr">последние изменения 15 мая 2012 в 14:55:17</div>
  </div>
</form>

css html

Источник: Stack Overflow на русском

Answer 1

▲ 0Принят

Как выровнять, чтобы инпуты были строго друг под другом?

Начать можно с самого очевидного - стилизовать лейблы нужных полей.

.format {
  display: inline-block;
  width: 140px;
}

<form className='form'>

  <div className="city">
    <label htmlFor="city" class='format'>Ваш город</label>
    <select id="city" name="city">
      <option value="moscow">Москва</option>
      <option value="st-petersburg">Санкт-Петербург</option>
      <option value="novosibirsk">Новосибирск</option>
      <option value="ekaterinburg">Екатеринбург</option>
      <option value="kazan">Казань</option>
    </select>
  </div>

  <hr className='line' />

  <div className="password">
    <label htmlFor="password" class='format'>Пароль</label>
    <input type="password" id="password" name="password" required />
    <div className="password_descr">
      Ваш новый пароль должен содержать не менее 5 символов.
    </div>
  </div>

  <div className="password">
    <label htmlFor="password" class='format'>Пароль еще раз</label>
    <input type="password" id="password" name="password" required />
    <div className="password_descr">
      Повторите пароль, пожалуйста, это обезопасит вас с нами на случай ошибки
    </div>
  </div>

  <hr className='line' />

  <div className="mail">
    <label htmlFor="email" class='format'>Электронная почта</label>
    <input type="email" id="email" name="email" required />
    <div className="mail_descr">
      Можно изменить адрес, указанный при регистрации.
    </div>
  </div>

  <div className="agree">
    <div className="agree_title">Я согласен</div>
    <input type="checkbox" id="consent" name="consent" required />
    <label htmlFor="consent">принимать актуальную информацию на емейл</label>
  </div>

  <div className="btn">
    <button type="submit">Изменить</button>
    <div className="btn_descr">последние изменения 15 мая 2012 в 14:55:17</div>
  </div>
</form>

Правильно ли я сверстал структуру?

"Правильность" будет сильно зависить от того, что в итоге ты хотел бы получить.

Выравнивание инпутов в форме

Ответы