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

Question

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

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

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

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

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

Answer 1

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