Выравнивание элементов ввода формы разной длины
Мне нужно создать форму, используя только 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 (не могу публиковать изображения, потому что просто создал свою учетную запись)
так что это почти там, но поля не выровнены должным образом.
Наверное, так хочет инструктор.
Почему бы вам не использовать CSS, чтобы сделать каждый элемент одинакового размера? input { width: 200px;}
Поля ввода должны быть разных размеров в соответствии с инструкциями для моего задания. Может быть, я неправильно понимаю, что вы говорите?
Ответы 1
Это можно сделать довольно легко с таблицей, использующей атрибут colspan для td элементов. Однако table предназначены для отображения данных и не должны использоваться для макета (эта статья перечисляет несколько причин).
Вам нужно посмотреть на желаемый результат и сформировать сетку, содержащую div элементы. У вас есть несколько «строк», поэтому поместите содержимое каждой строки внутрь div.row, занимающего всю ширину. Ваш контент в строках имеет ширину 1, 2 или 3 «столбца» из 4. Таким образом, вы делаете div.col1, div.col2, div.col3 с соответствующей шириной и отображением встроенного блока. Затем просто убедитесь, что вы поместили четыре столбца в каждую строку. Содержащие элементы div теперь определяют ширину, поэтому мы устанавливаем inputs и labels на 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>
Оффтоп, но почему "Почтовый индекс" и "Телефон" в одной строке?