Столбцы для разметки в IE9 и HTML5 (без таблицы?) - PullRequest
Новая
       2

Столбцы для разметки в IE9 и HTML5 (без таблицы?)

1 голос
/ 14 марта 2012

Я пытаюсь добиться расположения меток и текстовых полей, которое будет табличным, с прямыми вертикальными линиями. Каждая метка и текстовое поле начинаются с одной над ней, например: 

Label A    [_______]     Label B      [_______]     Label B      [_______]

Label D    [_______]     Label E      [_______]     Label F      [_______]

Мне очень трудно этого добиться. Мы ориентируемся только на IE9. Я знаю, что элемент таблицы не следует использовать для разметки, но у меня заканчиваются идеи!

Кто-нибудь со свежими идеями?!

1 Ответ

0 голосов
/ 14 марта 2012

Вы можете использовать плавающие элементы для достижения этой цели. Смотрите скрипку: http://jsfiddle.net/t0nyh0/vJYVe/9/

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

HTML 

<ul id="myForm">
<li><label>Label A</label><input type="text" /></li>
<li><label>Label B</label><input type="text" /></li>
<li><label>Label C</label><input type="text" /></li>
<li><label>Label D</label><input type="text" /></li>
<li><label>Label E</label><input type="text" /></li>
<li><label>Label F</label><input type="text" /></li>
</ul>​

CSS 

#myForm
{
    width: 700px;
}
#myForm li
{
    margin: 5px;
    width: 220px;
    float:left;
}
#myForm li label
{
    margin-right: 10px;
}

1016 *

...