Выравнивание элементов ввода формы различной длины

Question

Мне нужно создать форму, используя только HTML и CSS.Поля формы имеют разную длину в зависимости от того, какое это поле.

Я пробовал практически все решения, которые я нашел на SO и других сайтах, которые используют такие вещи, как режимы отображения, но все они, кажется, нацеленыв формах, где все поля ввода имеют одинаковый размер.Я также пытался использовать таблицу для создания формы, но я не знаю достаточно о них, чтобы сделать эту работу.Я по-прежнему открыт для использования стола, если кто-нибудь захочет научить меня, как заставить его работать.

form {
  margin-top: 25px;
}

.form {
  margin-left: 10px;
  background-color: #fff;
  float: left;
  width: 620px;
}

.form p {
  margin-left: 10px;
}

.form h3,
.summary h3 {
  font-size: 36px;
  background-color: #fff;
  width: auto;
  padding-top: 35px;
}

.form label {
  font-family: Arial, sans-serif;
  font-size: 14px;
  display: block;
  margin-left: 10px;
  color: #8f8f8f;
}

input {
  float: left;
  margin-left: 10px;
  background-color: #f9f9f9;
  border: 1px solid #cdcdcd;
  height: 36px;
  border-radius: 2px;
}

.form span {
  color: #861919;
}

.name {
  width: 288px;
}

.bigbar {
  width: 448px;
}

.smallbar {
  width: 128px;
}

<form action="#" method="POST">
  <label for="firstname">First Name <span>*</span></label>
  <input type="text" id="firstname" required class="name" />
  <label for="lastname">Last Name <span>*</span></label>
  <input type="text" id="lastname" required class="name" />
  <label for="address">Street Address <span>*</span></label>
  <input type="text" id="address" required class="bigbar" />
  <label for="apt">Apt/Unit/Suite #</label>
  <input type="text" id="apt" class="smallbar" />
  <label for="city">City <span>*</span></label>
  <input type="text" id="city" required class="bigbar" />
  <label for="province">Province <span>*</span></label>
  <input type="text" id="province" required class="smallbar" />
  <label for="code">Postal Code <span>*</span></label>
  <input type="text" id="code" required class="smallbar" />
  <label for="phone">Phone Number <span>*</span></label>
  <input type="tel" id="phone" required class="bigbar" />
  <button type="submit" id="submit">Continue Checkout</button>
</form>

В конце это должно выглядеть так: https://puu.sh/DQhyH/2aed3ce204.png

но насколько я могу получить это с моимзнание это выглядит следующим образом: https://puu.sh/DQhAs/eb0a1eeb5b.png (не может публиковать изображения из-за того, что просто сделал мой аккаунт)

так что он почти там, но поля не выровнены должным образом.

Answer 1

Вы должны обернуть все в div, чтобы правильно выровнять его, вот полный пример: https://codepen.io/anon/pen/PrxmWj

<section>
<div class="container">
<div class="column">
<form action="#" method="POST">

 <div class="col1">
  <div class="row column">
    <label for="firstname">First Name <span>*</span></label>
    <div class="form-group">
    <input type="text" id="firstname" required class="name" />
    </div>
  </div>

  <div class="row column">
    <label for="firstname">Last Name <span>*</span></label>
    <div class="form-group">
    <input type="text" id="lastname" required class="name" />
    </div>
  </div>
 </div>

 <div class="col2">
   <div class="row column">
    <label for="firstname">Street Address <span>*</span></label>
    <div class="form-group">
    <input type="text" id="sta" required class="name" />
    </div>
  </div>

  <div class="row column">
    <label for="firstname">Apt/Unit/Suite # <span>*</span></label>
    <div class="form-group">
    <input type="text" id="apt" required class="name" />
    </div>
  </div>
</div>

 <div class="col3">
  <div class="row column">
    <label for="firstname">City <span>*</span></label>
    <div class="form-group">
    <input type="text" id="city" required class="name" />
    </div>
  </div>


   <div class="row column">
    <label for="firstname">Province <span>*</span></label>
    <div class="form-group">
    <input type="text" id="province" required class="name" />
    </div>
  </div>
 </div>

 <div class="col4">
   <div class="row column">
    <label for="firstname">Postal Code <span>*</span></label>
    <div class="form-group">
    <input type="text" id="pc" required class="name" />
    </div>
  </div>

  <div class="row column">
    <label for="firstname">Phone Number <span>*</span></label>
    <div class="form-group">
    <input type="text" id="pn" required class="name" />
    </div>
  </div>
 </div>

<button type="submit" id="submit">Continue Checkout</button>


</form>
</div>
</div>
</section>

Answer 2

Это можно сделать довольно просто с помощью таблицы, использующей атрибут colspan для элементов td. Однако table s предназначены для отображения данных и не должны использоваться для макета ( в этой статье перечислены несколько причин, почему).

Вам нужно посмотреть на нужный результат и сформировать сетку, содержащую div элементов. У вас есть несколько «строк», поэтому поместите содержимое каждой строки в div.row, который занимает всю ширину. Ваш контент в строках имеет ширину 1,2 или 3 столбца из 4. Таким образом, вы делаете div.col1, div.col2, div.col3 с соответствующей шириной и встроенным отображением блока. Затем просто убедитесь, что вы поместили четыре столбца в каждом ряду. Содержащие div теперь определяют ширину, поэтому мы устанавливаем входные данные и метки на width:100%, чтобы взять всю ширину их соответствующих родителей.

div.field {
  display: inline-block;
  padding: .5em;
}

div.row,
input,
label,
button {
  width: 100%;
}

form {
  margin-top: 25px;
  width: 620px;
}

form label {
  font-family: Arial, sans-serif;
  font-size: 14px;
  display: block;
  margin-left: 10px;
  color: #8f8f8f;
}

input {
  /*float: left;*/
  margin-left: 10px;
  background-color: #f9f9f9;
  border: 1px solid #cdcdcd;
  height: 36px;
  border-radius: 2px;
}

form span {
  color: #861919;
}

.col2 {
  width: 288px;
}

.col3 {
  width: 448px;
}

.col1 {
  width: 128px;
}

<form action="#" method="POST">
  <div class="row">
    <div class="col2 field">
      <label for="firstname">First Name <span>*</span></label>
      <input type="text" id="firstname" required/>
    </div>
    <div class="col2 field">
      <label for="lastname">Last Name <span>*</span></label>
      <input type="text" id="lastname" required/>
    </div>
  </div>
  <div class="row">
    <div class="col3 field">
      <label for="address">Street Address <span>*</span></label>
      <input type="text" id="address" required class="bigbar" />
    </div>
    <div class="col1 field">
      <label for="apt">Apt/Unit/Suite #</label>
      <input type="text" id="apt" />
    </div>
  </div>
  <div class="row">
    <div class="col3 field">
      <label for="city">City <span>*</span></label>
      <input type="text" id="city" required/>
    </div>
    <div class="col1 field">
      <label for="province">Province <span>*</span></label>
      <input type="text" id="province" required/>
    </div>
  </div>
  <div class="row">
    <div class="col1 field">
      <label for="code">Postal Code <span>*</span></label>
      <input type="text" id="code" required/>
    </div>
    <div class="col3 field">
      <label for="phone">Phone Number <span>*</span></label>
      <input type="tel" id="phone" required/>
    </div>
  </div>
  <div class="row">
    <div class="col1 field"></div>
    <div class="col2 field">
      <button type="submit" id="submit">Continue Checkout</button>
    </div>
    <div class="col1 field"></div>
  </div>
</form>