Xpoint
   [напомнить пароль]

input с label выровнять вертикально?

Метки: [без меток]
2015-03-10 18:26:33 [обр] Floyd[досье]

здравствуйте,
подскажите как выровнять инпуты с лейблами по одной оси вертикально?
сейчас последующий лейбл идет вровень с предыдущим инпутом.
вот как сейчас:
http://filmdirectionfx.com/vert_alig.jpg

спасибо.

спустя 4 часа 8 минут [обр] Marat Tanalin(6/78)[досье]
Покажите, пожалуйста, минимальный код и расскажите, что конкретно не получается.
спустя 11 часов [обр] Floyd[досье]
<label for="surn">Фамилия</label><input type="text" name="surn" maxlength="32" value="">
<label for="name">Имя</label><input type="text" name="name" maxlength="32" value="">
<label for="otch">Отчество</label><input type="text" name="otch" maxlength="32" value="">
не получается выровнять их в одну линию, они идут лесенкой, как на картинке.
спустя 11 часов [обр] Marat Tanalin(6/78)[досье]

О причинах «лесенки» по HTML-коду без соответствующего CSS-кода что-то говорить трудно.

Семантически правильным (и заодно при стилях по умолчанию позволяющим достичь вашей цели) вариантом разметки пар «подпись / поле формы» является использование списка определений (DL — Definition List):

<dl>
    <dt><label for="form-example_family">Фамилия</label></dt>
    <dd><input type="text" name="family" id="form-example_family" maxlength="32" /></dd>

    <dt><label for="form-example_name">Имя</label></dt>
    <dd><input type="text" name="name" id="form-example_name" maxlength="32" /></dd>

    <dt><label for="form-example_patronym">Отчество</label></dt>
    <dd><input type="text" name="patronym" id="form-example_patronym" maxlength="32" /></dd>
</dl>

И обратите внимание, что атрибут for элемента LABEL указывает не на атрибут name поля формы, а на его атрибут id (в моём примере кода это тоже отражено).

спустя 20 часов [обр] Floyd[досье]
такая разметка не решила моей проблемы.
все 3 поля встали в 3 строки вместо одной.
спустя 28 минут [обр] Marat Tanalin(6/78)[досье]
Покажите минимальный CSS-код, относящийся к вопросу.
спустя 3 минуты [обр] Marat Tanalin(6/78)[досье]
При стилях по умолчанию каждое поле в моём примере должно располагаться под соответствующей ему подписью, а все пары подпись/поле — вертикально друг под другом, т. е. в том же порядке, в каком они следуют в HTML-коде — таково по определению поведение блочных элементов.
спустя 3 дня [обр] Floyd[досье]
решил через таблицы с vertical-align, вопрос закрыт.
спустя 7 часов [обр] Marat Tanalin(6/78)[досье]

Так вам нужно расположение не по вертикали (друг под другом), а по горизонтали (рядом друг с другом как бы в одну строку)? В правильно заданном вопросе — половина ответа. ;-)

Тогда в простейшем случае следует поместить каждую пару подпись/поле в отдельный элемент с display: table-cell, а все такие элементы — в общий элемент с display: table.

Более семантической будет разметка, основанная на DL / DT / DD, аналогичная уже описанной мной выше, но каждую пару следует заключить в отдельный DL (поскольку дочерними элементами DL по стандарту могут быть только DT и DD), который, в свою очередь, поместить внутрь элемента LI в списке UL:

<style>
UL {display: table; }
UL > LI {display: table-cell; vertical-align: top; }
</style>

<ul>
    <li><dl>
        <dt><label for="form-example_family">Фамилия</label></dt>
        <dd><input type="text" name="family" id="form-example_family" maxlength="32" /></dd>
    </dl></li>

    <li><dl>
        <dt><label for="form-example_name">Имя</label></dt>
        <dd><input type="text" name="name" id="form-example_name" maxlength="32" /></dd>
    </dl></li>

    <!-- и т. д. -->
</ul>

Реальные HTML-таблицы (элементы TABLE, TR, TD и проч.) для нетабличных данных использовать не рекомендуется и в качественной вёрстке не практикуется уже лет 10. Использование табличного CSS-представления выигрывает перед HTML-таблицами как с точки зрения доступности, так и в плане возможности привязать разные стили с помощью Media Queries в рамках адаптивной/отзывчивой вёрстки.

Powered by POEM™ Engine Copyright © 2002-2005