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

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

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

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

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

Есть у кого свежие идеи?!


user-interface html internet-explorer-9
person kaze    schedule 14.03.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Для этого вы можете использовать плавающие элементы. См. скрипку: 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;
}

​

person t0nyh0    schedule 14.03.2012