Name: Выравнивание полей формы с помощью CSS
Item: Выравнивание полей формы с помощью CSS
Author: typethavyk

npofopr.ucoz.ru

Вторник, 2025-07-15, 10:40:20

Приветствую Вас Гость | RSS

Каталог статей

Регистрация

Вход

Меню сайта

Форма входа

Категории раздела

css [4]

JS [1]

Главная » Статьи » html » css

Выравнивание полей формы с помощью CSS

Решение

Шаг первый

Создадим HTML-разметку.

<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>

Шаг второй

Выровняем содержимое каждого дива по правому краю и назначим ему обновление потока.

.field {clear:both; text-align:right;}

Шаг третий

Заставим каждый элемент label «утечь» влево.

.field {clear:both; text-align:right;}

label {float:left;}

Теперь каждый заголовок встал напротив соответствующего поля, но ширина формы стала 100% от ширины родительского элемента.

Шаг четвертый

Для того, чтобы прижать поля к заголовкам, обернём всю конструкцию блоком:

<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>

Добавим в CSS обтекание для этого блока:

.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 | Добавил: npofopr (2009-07-20)

Просмотров: 7423 | Комментарии: 4 | Теги: html, css | Рейтинг: 0.0/0 |

Всего комментариев: 3

Порядок вывода комментариев:

3 typethavyk (2012-08-07 03:22:10)

windows 7 key multiple computers buy windows 7 anytime upgrade key
windows ultimate 7 product key

2 typethavyk (2012-08-02 00:35:33)

oem key windows 7 activation key for windows 7 home premium
windows 7 key verification

1 typethavyk (2012-06-13 01:12:14)

http://www.louboutin-outlets.com
xfafkv

Статистика

Онлайн всего: 1

Гостей: 1

Пользователей: 0

Поиск

Сделать бесплатный сайт с uCoz