内联表格，缩小以适应标签左侧

Question

标题说标签，因为这是我的用例，但显然它可以是任何元素。我正在努力实现的形式如下布局：

 [label] [input] 
[another label] [input] 
    [third label] [input] 

目前我的HTML大致样子（而忽略了细节）：

div { 
 
    overflow: auto; 
 
} 
 
label, input { 
 
    float: left; 
 
} 
 
label { 
 
    text-align: right; 
 
    width: 200px; 
 
}

<div> 
 
    <label>Label</label> 
 
    <input type="text"> 
 
</div> 
 
<div> 
 
    <label>Another label</label> 
 
    <input type="text"> 
 
</div> 
 
<div> 
 
    <label>Third label</label> 
 
    <input type="text"> 
 
</div>

然而，设计要求我的标签收缩到适合最高的一个，所以我不能使用固定的宽度。我需要最长的标签来完全适合屏幕的左侧和输入，而所有其他标签也应该获得该宽度。

我在寻找的是最好的方法来实现这种布局，同时保持HTML作为语义的实际可能（一个额外的div在这里或那里是没有问题的，我现在使用它们来更容易地控制垂直对齐和一些小的造型）。目前，我的文字输入大小相同，但也有一些无线电/复选框组必须驻留在[input]部分。

另外，我想保留我的选项，以便使用媒体查询来应用一些RWD元素。这对于这个特定的项目来说不是一个很大的要求，但你永远不知道。哦，不幸的是，我必须支持IE低至9。

我该如何解决IE9和IE10支持的语义正确（即不使用表格）方式？

Answer 1

显然，我有错误的观念有关使用display: table-cell还是我做错了什么事在我最初的测试。这似乎足以让正是我想要它

div { 
 
    display: table-row; 
 
} 
 
label, input { 
 
    display: table-cell; 
 
} 
 
label { 
 
    text-align: right; 
 
}

<div> 
 
    <label>Label</label> 
 
    <input type="text"> 
 
</div> 
 
<div> 
 
    <label>Another label</label> 
 
    <input type="text"> 
 
</div> 
 
<div> 
 
    <label>Third label</label> 
 
    <input type="text"> 
 
</div>

Answer 2

一个疯狂的想法是将标签和输入组合在一起是不同的div。棘手的部分是通过line-height正确排列它们。

<div id="labels"> 
    <label>...</label> 
    ... 
</div> 
<div id="inputs"> 
    <input>...</input> 
    ... 
</div> 

CSS：

#labels { 
    float: left; 
} 
#labels label { 
    display: block; 
    text-align: right; 
    line-height: 20px; 
} 
#inputs input { 
    display: block; 
    line-height: 20px; 
}