html - 使用 css 的标签和输入布局

Question

我正在尝试将标签和输入框排在同一行上，使标签占据它需要的所有空间，然后输入框使用所有剩余空间。例如，如果容器为 1000px，标签为 342px，则输入宽度应为 658px。但如果标签更改为 100px，则输入应调整为 900px。我可以使用表格布局或使用 JavaScript 在标签宽度更改时调整输入框的大小来执行此操作，但理想情况下我只想使用 css 来执行此操作。我的 html 看起来像这样。

<div id="container">
  <label for="inputBox">variable text</label>
  <input type="text" id="inputBox" />
</div>

谢谢，

编辑:为了帮助说明我在这里尝试做的是一个使用表格的例子。

<table style="background-color:#ddd;width:500px;">
  <tr>
    <td style="width:0;white-space:nowrap;"><label style="width:100%">text</label></td>
    <td><input style="width:100%" type="text" /></td>
  </tr>
</table>

Answer 1

正确的做法是:

#container  { width: 1000px; display: table }
#container label  { display: table-cell; white-space: nowrap; }
#inputBox  { width: 100%; display: table-cell; }

但这在 IE 6 或 7 中不起作用。