跟进"Best Practice for forms layout -- table or flow?"

Question

我问的问题是，表布局是否适合用于收集概要数据的表单。所有的受访者都说"表格不好"，但我没有看到一个明确的答案，关于如何在没有满足一些基本要求的表格的情况下布置它:

标签和控件按预期排列

不必指定硬编码宽度

不要左右浮动，可能会在中间留下大量空白

例如，考虑这个简单的html布局http://jsfiddle.net/roger_davis/7h3bC/4/您建议如何修改html以使标签按照预期排列(并且在左侧)

我看了一下，几乎我看过的每个网站都使用这里的表格布局。例如，对于在stackoverflow上编辑配置文件，您的配置文件输入表单被布置在一个表中。谷歌登录页面是一个表格，雅虎注册没有使用表格，但使用硬编码的宽度。

我错过了什么吗?

<代码>

Answer 1

这是我对您的小提琴的更新:http://jsfiddle.net/7h3bC/9/基本定义HTML:

<ul class='controls'>
    <li> <input type="checkbox" name="mycheckbox" id='mycheckbox'></li>
    <li><input type="text" name="myInput" id='myInput'></li>
</ul>
<ul class='labels'>
    <li> <label for="mycheckbox" >Tick me if you dare</label></li>
    <li><label for="mycheckbox">  Tick me if you dare</label></li>
</ul>

css

和

<style>
.controls,
.labels
{
    float:left;
}
.controls 
{
     padding-right:5px;
     text-align:right;
}
</style>

Answer 2

我不确定浏览器对此的支持有多好，在FF4中测试:http://jsfiddle.net/shanethehat/7h3bC/11/

<div id="tableForm">
    <div class="tableRow">
        <div class="tableCell">
            <label for="mycheckbox">  Tick me if you dare</label>
        </div>
        <div class="tableCell">
            <input type="checkbox" name="mycheckbox" id="mycheckbox">
        </div>
    </div>
    <div class="tableRow">
        <div class="tableCell">
            <label for="mytext">  Give me some text test test</label>
        </div>
        <div class="tableCell">
            <input type="text" name="mytext" id="mytext">
        </div>
    </div>
</div>

div#tableForm {
 display:table;   
}
div.tableRow {
  display:table-row;  
}
div.tableCell {
    display:table-cell;   
    width:inherit;
}

是的，我知道，我刚刚用div创建了一个表。关键是，这很容易访问，并且在语义上是正确的。

Edit:在IE7中失败得很惨，固定宽度是唯一的方法，但8和9似乎还可以。

Edit2:切换标签/字段周围并设置右对齐:http://jsfiddle.net/shanethehat/7h3bC/12/。在这一点上，标记变得有点类太重了。left将是使用CC_3类的替代方案，但以IE8为代价。