#html #css #webforms #stylesheet
#HTML #css #веб-формы #таблица стилей
Вопрос:
В настоящее время я работаю над рефакторингом одного из наших контроллеров форм, чтобы мы могли использовать его для общедоступного сайта. В настоящее время он генерирует макет таблицы для форм, но я пытаюсь сделать это с помощью CSS forms.
Я пытаюсь воспроизвести что-то, что выглядело бы следующим образом http://www.stylephreak.com/uploads/source/cssforms/cssform.php
Проблема, с которой я сталкиваюсь, заключается в том, что все примеры форм CSS, которые я нахожу, похоже, предполагают фиксированную ширину для метки левого столбца. В моем случае я не могу контролировать, что содержится в метке, это поступает из редактируемого пользователем банка переводов. С таблицей это очень просто, я бы просто использовал пробел:nowrap; а ширина td определялась бы самой длинной меткой, и все были бы довольны.
Возможно ли сделать что-то подобное с CSS? Я пробовал использовать min-width и заставлять его не переносить. Это сработало, но только сдвинуло текущий элемент управления вправо и испортило выравнивание, не говоря уже о том, что минимальная ширина не поддерживается в IE 6.
Действительно ли так плохо использовать таблицу для макетов форм? Это табличные данные, и в конце концов, они имеют смысл при линеаризации, нет?
Комментарии:
1.
max-widthвместоmin-width?2. @Stijntjhe max-width, я думаю, в моем случае не сработал бы. Я хочу, чтобы они были выровнены, поэтому мне нужна какая-то ширина. Если я укажу только максимальную ширину для своих меток, они будут повсюду, нет?
3. Если я добавлю к метке margin-bottom:0,6em, по крайней мере, это не будет выглядеть ужасно при переносе (раньше это было близко к другому элементу управления, поскольку он плавающий слева)
4. Я думал, вы использовали
min-width, но вы должны использоватьmax-width. Вопрос немного запутанный.5. Вам действительно больше не стоит беспокоиться о IE6.
Ответ №1:
Вы можете установить для <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 текстовые поля не будут выровнены правильно.
Комментарии:
1. Отличное решение, но не работающее в IE 6, может пройти, но не поддерживающее IE 7, я не думаю, что это сработает с высшим руководством 😉
2. Я проверил аналитику, к сожалению, на IE 7 по-прежнему приходится 20% наших посетителей… почему люди просто не обновятся!
3. 1 и принято, это хорошее решение, надеюсь, браузеры скоро догонят спецификации CSS. Спасибо NGLN и за другие ответы 1.
Ответ №2:
Что ж, вот решение, которое немного нетрадиционно, но я думаю, что простота должна работать для всех браузеров.
Доступность, похоже, не является проблемой, поскольку управление клавиатурой и мышью осуществляется по желанию. Основным недостатком, конечно, является то, что эта страница плохо отображается, если CSS отключен. Есть ли где-нибудь статистика по этому поводу? И также я не знаю, как программы чтения с экрана отреагируют на эту бессмысленность.
Комментарии:
1. Простое исправление, но я чувствую, что «немного нетрадиционно» — это мягко сказано.
2. Не уверен, как fiddle правильно это отобразил, но это не работает в FireFox или Chrome. pastebin.com/GjcQwRRj
3. @jfrobishow: Вы должны добавить действительное объявление doctype. В режиме quirks это действительно становится уродливым. Именно такими и должны быть quirks.
Ответ №3:
Насколько мне известно, ярлыки form всегда занимают 100% доступной ширины. Вы могли бы использовать это.
Если разрешено заполнять всю ширину предоставленного контейнера для этой формы, то это кажется правильным ответом:
Незначительным недостатком в этом случае является выбор соотношения между шириной меток и входными данными.