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

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

1 个答案: