Выравнивание поля ввода? - PullRequest
Новая
       21

Выравнивание поля ввода?

5 голосов
/ 28 сентября 2011

Как я могу заставить свои ящики выравниваться друг с другом, если текст в них длиннее остальных.

У меня есть вся эта форма в неупорядоченном списке.

Я скопировал и отобразил код через jsFiddle, здесь вы можете найти то, о чем я говорю ...

http://jsfiddle.net/EFByC/

Ответы [ 6 ]

2 голосов
/ 28 сентября 2011

Я бы порекомендовал вам изменить форму HTML следующим образом 

<li><label for="firstname">PATIENT FIRST NAME: </label><input type="text" id="firstname"/></li>
<li><label for="middle">PATIENT MIDDLE INITIAL:(OPTIONAL) </label><input type="text" id="middle" /></li>
<li><label for="last">PATIENT LAST NAME: </label><input type="text" id="last" /></li>
<li><label for="date">DATE OF BIRTH: </label><input type="text" id="date" /></li>
<li><label for="gender">GENDER: </label><input type="text" id="gender" /></li>
<li><label for="id">SUBSCRIBER ID: </label><input type="text" id="id"/></li>
  • Присвойте каждому полю формы уникальный идентификатор
  • Не переносить ввод внутри метки
  • Вы можете использовать атрибут for на этикетке, чтобы подключить его к входу.

Добавьте правило CSS к #form-container label, чтобы задать им определенную ширину: 

width: 210px;

См. Демонстрацию .

2 голосов
/ 28 сентября 2011

Ваши теги <label> были обернуты тегами <input>, что вызывало проблему попытки обработать их отдельно с помощью CSS:

http://jsfiddle.net/EFByC/3/

1 голос
/ 28 сентября 2011

У вас есть пара вариантов, действительно:

  • Сдвиньте входы вправо, как предложил Кевин (установите ширину UL для управления интервалом).
  • Извлеките ввод из метки и присвойте метке фиксированную ширину (как в ответе Питера).
  • Внутри метки оберните текст метки в интервал и задайте этому интервалу фиксированную ширину (это, как и первый вариант, позволит вводу остаться внутри метки - см. ниже).

И заметьте, что, хотя многие люди говорят, что вводить внутри метки плохо, этоне обязательно верно (это определенно в стандарте - см. этот вопрос , чтобы узнать больше).А обтекание ввода в метке позволяет получить поведение «щелкни по имени и сфокусируй поле», не задавая кучу уродливых атрибутов for = «what».

Надеюсь, это поможет!

1 голос
/ 28 сентября 2011

добавить набор полей, указать ширину.сделать так, чтобы ваши входы и метки отображались: блок;плавающие ваши входы правильно

1 голос
/ 28 сентября 2011

Почему вы отметили форму в <ul>, это не обязательно.

Для более удобного и удобочитаемого макета я предлагаю разместить надписи над полями ввода. Примерно так:

http://jsfiddle.net/Claudius/EFByC/9/

0 голосов
/ 28 сентября 2011

Существует несколько подходов к формированию стиля.В этом случае вы можете использовать входные данные, и это даст вам желаемый результат без изменения HTML.

См. Демонстрацию : http://jsfiddle.net/EFByC/8/

...