css:выравнивание_полей_формы_с_помощью_css

Выравнивание полей формы с помощью 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}
  • css/выравнивание_полей_формы_с_помощью_css.txt
  • Последнее изменение: 2022/06/28 23:00
  • admin