Колони за оформление в 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

Можете да използвате плаващи елементи, за да постигнете това. Вижте fiddle: 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