Intereting Posts
установить все css3 background-image с помощью jquery Как написать значение фракции с помощью html? HTML5: Размещение canvasа на видео с элементами управления img onload не работает в IE7 Обнаружить загрузку изображения с помощью jQuery Как декодировать объекты HTML в swift 2.0? Bootstrap: значение кнопки радио не отображается, если дважды проверено AngularJS ng-click не работает в теге Переполнение-х: скрытый; на мобильном устройстве не работает Почему IE9 открывается в режиме документа в качестве стандартов IE7? Что касается гибкого дизайна, как вы обрабатываете телефоны с высоким разрешением, такие как Galaxy S4? PHP MYSQL – заполнять таблицы с нумерацией HTML-таблицы на основе того, соответствуют ли они номер строки Установить значение входного файла во второй файл ввода Может ли другой тег находиться внутри заголовка HTML 5 (например, h1, h2, h3 и т. Д.)? Открыть ссылку на изображение в новых windowsх с помощью JQuery

Еще одна проблема с Divs vs Tables: Forms

[Мета-заметка:] Я просматривал страницу вопросов, очень уставая от «DIVS vs Tables» «Когда использовать таблицы против DIVS» «Are Divs лучше таблиц» «Таблицы в сравнении с CSS» и все вопросы, которые задают SAME ВЕЩЬ OMG PEOPLE, но я хотел бы видеть, как люди решают перевод канонического примера «почему вы должны сдавать и использовать таблицы»:

Name
Social Security Number

Вопрос: Как лучше (семантически, просто, надежно, гибко, портативно) реализовать выше без таблиц. Для начала я полагаю, что наивная реализация использует фиксированную ширину столбца для первого столбца, но это может иметь iffy результаты для динамически созданного контента. В том числе сильные / слабые стороны вашего подхода в ответе были бы приятными.

PS Еще один интересный вопрос о вертикальном центрировании, но взлом для этого довольно хорошо покрывается jakpsatweb.cz

EDIT: scunlife воспитывает хороший пример того, почему я не придумывал эту проблему. Таблицы могут выравнивать несколько столбцов одновременно. Вопрос все еще стоит (я хотел бы увидеть различные методы CSS, используемые для выравнивания / макета) – хотя решения, которые могут его обработать? более конкретный пример определенно предпочтителен.

То, что я обычно делаю, это:

 


и в CSS:

 label,input { display: block; float: left; margin-bottom: 1ex; } input { width: 20em; } label { text-align: right; width: 15em; padding-right: 2em; } br { clear: left; } 

Конечно, вам нужно будет определить ширину в соответствии с вашими фактическими данными 🙂

  • Во-первых, дайте ярлык и входной display: block , чтобы ему можно было назначить размер и выстроиться в линию.
  • Они оба получают float: left потому что Explorer делает что-то по-другому
  • Хорошо отформатируйте ярлык
  • взломать br чтобы было clear: left где-то clear: left , и я помню, что наклеить его на ярлык не удалось в каком-то браузере.

Кроме того, с br вы получите хорошее форматирование, даже если браузер не поддерживает CSS 🙂

Трюк заключается в том, что форма становится более сложной, чем ваша выборка, вы понимаете, что таблицы позволяют использовать «гибкую сетку», которой не обладают никакие другие элементы.

например, что, если «ввод» более сложный, чем текстовое поле? например, пучок переключателей, каждый со своей собственной меткой:

 Color: [____Red___][v] Hood: [*] Size: (_) Small (_) Medium (_) Large (*) X-Large 

Если все, что вам нужно, это простые формы, CSS отлично, но как только вам понадобится grid, все становится интересным …

Если вы действительно хотите это сделать, я бы посмотрел « Решение Man In Blue» , он работает очень хорошо и очень чист.

Люди говорят о том, что таблицы получают свои формы, чтобы показать, как они хотят, это правда, ТОЛЬКО, если вы хотите отображать свои формы в столбцах и готовы потерять смысловое значение. Имея следующий HTML-код, вы можете отобразить эту форму в таком количестве макетов, сколько захотите.

BTW – Нет для

 
Personal Info

Вы можете очистить или настроить их на overflow: hidden чтобы обеспечить очистку поплавков.

Опции из приведенного выше html:

 Name |==============| SSN |==============| Name |==============| SSN |==============| Name |==============| SSN |==============| Name |==============| SSN |==============| Name: |==============| SSN: |==============| Name: |==============| SSN: |==============| 

Все вышесказанное может быть выполнено всего несколькими строками css.

Когда дело доходит до радио, флажков и кнопок отправки, это становится немного сложнее, но чистый семантический HTML-код может отображаться так, как вы хотите, используя css.

Хотя другие предложения, вероятно, лучше для получения гибкого макета, буквальный ответ на вопрос:

 

с

   

Это работает с последними версиями Firefox, Chrome, Opera и Safari. Он также работает с IE8 Beta 2 (режим стандартов). Он не работает с IE7 или ранее, но «прогрессивно улучшает» и все такое.

Я думал о чем-то вроде:

 
Name:
Social Security Number:

который, если правый столбец имеет фиксированную длину, выравнивает ОК с переменной длиной текста, но мне интересно, каковы недостатки этого метода?