Блог

Привет,

Как мне выровнять поле ввода таким образом, чтобы они начинались с одной вертикальной линии? Есть ли метод CSS, который я могу использовать вместо ручного редактирования каждого поля ввода?

Это html-код:

  <form id="survey-form"> 
    <div id="form-group"> 
      <label for="name" id="name-label"> Name: </label> 
      <input type="text" id="name" name="name" placeholder="full name" required></input><br> 
    </div> 

    <div id="form-group"> 
      <label for="email" id="email-label"> Email: </label> 
      <input type="email" id="email" name="email" placeholder="validated email" required></input><br> 
    </div>

    <div id="form-group"> 
      <label for="number" id="number-label"> Contact: </label>
      <input type="number" id="number" name="contact" min="00000000" max="99999999" placeholder="phone number"></input><br> 
    </div>
 </form>
  

Для CSS у меня в настоящее время есть только:

 input {
  margin-bottom: 15px;
  width: 10%;
}
  

Мне было интересно, как я могу закодировать это в CSS таким образом, чтобы поля ввода текста выровнялись? Например, если я использую заполнение, текстовые поля все равно не будут выровнены, так как длина метки отличается.

Во-первых, вам не нужно закрывать ввод как </input> .

Кроме того, при последнем вводе вы забыли свой <div id="form-group"> .

Теперь идея выровнять все входные данные заключается в том, чтобы просто сделать все ваши метки в виде элемента встроенного блока с определенной шириной. Таким образом, он вытеснит все входные данные и выровняет их по истечении ширины.

 input {
  margin-bottom: 15px;
  width: 10%;
}

#form-group label {
  display: inline-block;
  width: 60px;
}  

 <form id="survey-form">
  <div id="form-group">
    <label for="name" id="name-label"> Name: </label>
    <input type="text" id="name" name="name" placeholder="full name" required><br>
  </div>

  <div id="form-group">
    <label for="email" id="email-label"> Email: </label>
    <input type="email" id="email" name="email" placeholder="validated email" required><br>
  </div>

  <div id="form-group">
    <label for="number" id="number-label"> Contact: </label>
    <input type="number" id="number" name="contact" min="00000000" max="99999999" placeholder="phone number">
  </div>
</form>  

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

 #form-group{
  display:flex;
  align-items:center;
  margin-bottom:20px;
}
#form-group label{
  flex:1;
  flex-basis:20%;
  max-width:20%;
}
#form-group input {
  flex:2;
  flex-basis:20%;
  max-width:20%;
}
  

Рабочая демонстрация

 #form-group{
  display:flex;
  align-items:center;
  margin-bottom:20px;
}
#form-group label{
  flex:1;
  flex-basis:20%;
  max-width:20%;
}
#form-group input {
  flex:2;
  flex-basis:20%;
  max-width:20%;
}  

 <form id="survey-form"> 
    <div id="form-group"> 
      <label for="name" id="name-label"> Name: </label> 
      <input type="text" id="name" name="name" placeholder="full name" required>
    </div> 

    <div id="form-group"> 
      <label for="email" id="email-label"> Email: </label> 
      <input type="email" id="email" name="email" placeholder="validated email" required>
    </div>

    <div id="form-group"> 
      <label for="number" id="number-label"> Contact: </label>
      <input type="number" id="number" name="contact" min="00000000" max="99999999" placeholder="phone number">
    </div>
 </form>