CSS для ширины меток динамической формы - PullRequest
Новая
       26

CSS для ширины меток динамической формы

11 голосов
/ 27 мая 2011

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

Я пытаюсь воспроизвести что-то похожее на это http://www.stylephreak.com/uploads/source/cssforms/cssform.php

Проблема, с которой я столкнулся, заключается в том, что все примеры форм CSS, которые я нахожу, предполагают фиксированную ширину для метки левого столбца. В моем случае я не контролирую, что происходит с ярлыком, он поступает из редактируемого пользователем банка переводов. С таблицей это очень легко, я бы просто использовал пробел: nowrap; и самый длинный лейбл определит ширину ТД, и все будут довольны.

Возможно ли сделать что-то подобное с CSS? Я попытался использовать минимальную ширину и заставить его не оборачивать. Это сработало, но только подтолкнуло текущий элемент управления вправо и испортило выравнивание, не говоря уже о том, что минимальная ширина не поддерживается в IE 6.

Неужели так плохо использовать таблицу для макетов форм? Это табличные данные и имеет смысл когда линеаризован ведь нет?

Ответы [ 3 ]

8 голосов
/ 27 мая 2011

Вы можете установить <label> css на display: table-cell и содержащее <div> на display: table-row. Это будет имитировать поведение использования таблицы без фактического использования <table>. 

<div style="display: table-row">
    <label style="display: table-cell; padding: 0 1em; text-align: right;" for="fm-firstname">First Name:</label>
    <input type="text" name="fm-firstname" id="fm-firstname" />
</div>
<div style="display: table-row">
    <label style="display: table-cell; padding: 0 1em; text-align: right;" for="fm-lastname">Last:</label>
    <input type="text" name="fm-lastname" id="fm-lastname" />
</div>

Это будет отлично смотреться в любом новом браузере (Firefox, Chrome, IE8 +). В IE7 текстовые поля не будут правильно выровнены.

2 голосов
/ 27 мая 2011

Ну, вот немного нестандартное решение, но я думаю, что простота должна работать для всех браузеров.

Образец скрипки .

Доступность, похоже, не является проблемой, поскольку управление с клавиатуры и мыши действует как желаемое. Главный недостаток, конечно, заключается в том, что эта страница плохо отображается, если CSS отключен. Есть ли где-нибудь статистика об этом? И также я не знаю, как программы чтения с экрана отреагируют на эту глупость.

1 голос
/ 27 мая 2011

Насколько мне известно, form s всегда занимают 100% доступной ширины. Вы можете использовать это.

Если разрешено заполнить всю ширину предоставленного контейнера для этой формы, то это кажется правильным ответом:

Образец скрипки.

Незначительным недостатком в этом случае является выбор соотношения между шириной меток и входами.

...