html - 内联表单，缩小以适合左侧的标签

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 或没有问题，我现在使用它们可以更轻松地控制垂直对齐以及一些小的样式)。目前我的文本输入恰好大小相同，但也有一些 radio /复选框组必须位于 [input] 部分。

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

我如何以 IE9 和 IE10 支持的语义正确(即不使用表格)方式解决这些问题？

Answer 1

一个疯狂的想法是将标签和输入组合在一起，即单独的 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;
}