Выровнять элементы формы в css
Я новичок в css и имею простую форму входа, которую я пытаюсь правильно выровнять. В основном два столбца с метками и кнопка "Вход" в одном столбце и текстовые поля в другом столбце. Как это сделать в css?
Код html
<body>
<form action="" method="post">
<label> Username </label>
<input type="text"/>
<label> Password </label>
<input type="password"/>
<input type="submit" value="submit"/>
</form>
</body>
Ответы
Ответ 1
Это один из подходов, который работает:
form {
width: 80%;
margin: 0 auto;
}
label, input {
/* in order to define widths */
display: inline-block;
}
label {
width: 30%;
/* positions the label text beside the input */
text-align: right;
}
label + input {
width: 30%;
/* large margin-right to force the next element to the new-line
and margin-left to create a gutter between the label and input */
margin: 0 30% 0 4%;
}
/* only the submit button is matched by this selector,
but to be sure you could use an id or class for that button */
input + input {
float: right;
}
JS Fiddle demo.
Отрегулируйте размеры и поля, подходящие, например, для вашего прецедента и эстетики.
Ответ 2
За то, что вы просите, я просто поставил их в таблицу.
<form action="" method="post">
<table>
<tr>
<td><label> Username </label></td>
<td><input type="text"/></td>
</tr>
<tr>
<td><label> Password </label></td>
<td> <input type="password"/></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="submit"/></td>
</tr>
</table>
</form>
Вот как это будет выглядеть
http://jsfiddle.net/wCSAn/
Ответ 3
Я ответил на этот вопрос в своем сообщении в блоге: https://wscherphof.wordpress.com/2015/06/17/right-align-form-elements-with-css/
Это относится к этой скрипке: https://jsfiddle.net/wscherphof/9sfcw4ht/9/
Спойлер: float: right;
- правильное направление, но для получения четких результатов требуется немного больше внимания.