IE9 和 HTML5 中的布局列（没有表格？）

Question

我正在尝试实现标签和文本框的布局，它是表格的，带有垂直直线。每个标签和文本框都从其上方开始，如下所示：

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

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

我觉得很难做到这一点。我们只针对 IE9。我知道应该避免使用 table-element 进行布局，但我的想法已经不多了！

任何有新想法的人？！

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;
}

​