CSS для выравнивания текстового поля и метки

Я пытаюсь снять макет формы с таблиц и войти в мир div и css.

У меня трудности, хотя в моем макете. Я хотел бы заказать элементы, где метка расположена непосредственно над входом. Вот что выглядит в настоящее время: Скриншот

Я бы хотел, чтобы метки окружения и текстовые поля были выровнены по вертикали, но они, похоже, образуют шаблон лестницы.

Вот css:

#content { position: absolute; top: 110px; left: 350px; width: 775px; height: 605px; } #content label { display:inline; margin-right:4px; vertical-align:top; } #content input { float:left; margin:1px 20px 1px 1px; } 

и HTML:

 

вставьте элементы input в label s, чтобы текстовая метка и поле были сгруппированы.

это использование указано в спецификации HTML4 :

To associate a label with another control implicitly, the control element must be within the contents of the LABEL element. In this case, the LABEL may only contain one control element. The label itself may be positioned before or after the associated control.

 

CSS:

 #content { position: absolute; top: 110px; left: 350px; width: 775px; height: 605px; } #content label { display:inline; float:left; margin-right:4px; vertical-align:top; } 

пример

Затем примените display:inline и float:left to the s (или используйте display:inline-block вместо этого, если вам не нужно беспокоиться о примере старых браузеров)

Изменить это

 #content input { float:left; margin:1px 20px 1px 1px; } 

к этому

 #content input { display:inline; margin:1px 20px 1px 1px; } 

Это удаление float:left и заменить на display:inline; ,

Пример: http://jsfiddle.net/jasongennaro/ptKEh/

РЕДАКТИРОВАТЬ

@mdmullinax указал, что вопрос также запросил текст над полем ввода

Пропустил это 😉

В этом случае удалите правила display и используйте три

 



Пересмотренный пример: http://jsfiddle.net/jasongennaro/ptKEh/2/

Обычно я использую таблицы для форм, которые выложены следующим образом. С ними намного легче работать, чем CSS (IMO), и структура намного понятнее.

 


CSS очень хорош для перемещения элементов вокруг их контейнера. Однако, когда вы хотите, чтобы вещи позиционировались очень регулярно, в зависимости от других элементов, он может действительно запутывать логику.

s гораздо более явны.