Выравнивание полей формы с помощью CSS
Шаг первый
Создадим экспериментальную форму:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="css/main.css" /> <title>forms</title> </head> <body> <div class="field"> <label for="n">Имя</label> <input type="text" id="n" /> </div> <div class="field"> <label for="ln">Фамилия</label> <input type="text" id="ln" /> </div> <div class="field"> <label for="a">Место жительства</label> <input type="text" id="a" /> </div> </body> </html>
Шаг второй
Выравниваем содержимое каждого дива по правому краю и назначим ему обновление потока:
.field {clear:both; text-align:right;}
Шаг третий
Заставим каждый элемент label уйти влево:
.field {clear:both; text-align:right;} label {float:left;}
Шаг четвертый
Для того, чтобы прижать поля к заголовкам, обернём всю конструкцию блоком:
<div class="main"> <div class="field"> <label for="n">Имя</label> <input type="text" id="n" /> </div> <div class="field"> <label for="ln">Фамилия</label> <input type="text" id="ln" /> </div> <div class="field"> <label for="a">Место жительства</label> <input type="text" id="a" /> </div> </div>
.field {clear:both; text-align:right;} label {float:left;} .main {float:left}
Шаг пятый
Теперь видно, что из-за float, элементы перестали находиться на одной линии. Vertical-align, к сожалению, работать не будет, но можно воспользоваться line-height. Также зададим отступ между заголовком и полем:
.field {clear:both; text-align:right; line-height:25px;} label {float:left; padding-right:10px;} .main {float:left}