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

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

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

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

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

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

Ответ 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 текстовые поля не будут правильно выровнены.

Ответ 2

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

Пример скрипта.

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

Ответ 3

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

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

Пример скрипта.

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