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中不起作用。

Answer 2

这个CSS应该有效：

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

当然，您可以根据需要调整容器的宽度。

编辑：上面的CSS将inputBox扩展为1000px，因此使div宽度大于所需。要实现您想要的效果，您可以使用http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/中描述的overflow属性和一些额外的标记：

<div id="container">
  <label for="inputBox">variable text</label>
  <div><input type="text" id="inputBox" /></div>  <!-- Notice the input is wrapped in an additional div -->
</div>

CSS：

#container  { width: 1000px; white-space: nowrap; }
#container label  { float: left; margin-right: 5px; /* The label must be a floating element, the margin adds a little space to visually separate it from the input field */ }
#container div  { overflow: hidden; /* This does the trick */ }
#inputBox  { width: 100%; }

Answer 3

#container { margin-left: 100px; position: relative; }
#container label { position: absolute; left: -100px; }
#container input { width: 100%; }

（您可以使用box-sizing及其特定于浏览器的版本来确保输入的边框在必要时很好地排列，如果您在IE6-7中也需要，那么可以使用一堆填充黑色来容纳额外的像素。）

这要求标签的大小是已知的。如果没有一堆额外的标记（这实际上不比使用表格更好），就不能依赖于label的文本内容的宽度（即'shrink-wrap'）。 / p>

当液体布局形式比这更复杂时，通常需要转到表格。传统的CSS定位在固定，液体和收缩包装内容之间分配宽度方面并不是很好。

使用css标签和输入布局

3 个答案: