Html 拉伸元素以适合容器

我正在用这种外观编写表单布局（使用Bootstrap，但我认为这与我的问题无关）：

[input]

元素的大小是固定的。我需要两列标签正确对齐，但我不希望它们的宽度相同。换句话说，我整理了标签以扩展到该列中最宽的标签

有可能吗

这或多或少是我正在使用的HTML：

标签1
标签2
标签3
标签4

您可以试试（）。您的HTML必须更改为以下内容：

<div id="whatever">
<form>
  <div class="controls controls-row">
    <label for="input1">label1</label>
    <input class="span2" type="text" id="input1">
  </div>
  <div class="controls controls-row">
    <label for="input2">label2</label>
    <input class="span2" type="text" id="input2">
  </div>
  <div class="controls controls-row">
    <label for="input3">label3</label>
    <input class="span2" type="text" id="input3">
  </div>
  <div class="controls controls-row">
    <label for="input4">label4</label>
    <input class="span4" type="text" id="input4">
  </div>
</form>
</div>

---

第二个CSS规则防止在输入标签行内换行。

显示：表格，表格单元格可以工作

列也是一个选项，但不太兼容。（@Sirko展示了一个很棒的演示。）

css

---

jsFIDLE demo:

Hm，您可以通过将元素排列在列（而不是行）中，然后浮动列，右对齐输入，同时确保标签不会拆分为多行。属性的非前缀版本应始终列在前缀版本之后。还应注意的是，元素的顺序将不同于OP在其示例布局中显示的顺序：第一列将包含元素1-3，第二列将包含元素4-6。@cimmanon关于属性的顺序：注意并更改-谢谢。至于另一点：这只是一个粗略的想法，如何解决老年退休金问题。很可能元素的顺序可以通过生成脚本进行调整。+1用于显示column count属性，我不知道，但我需要IE9兼容性。这是一个小钱，但是。。。。

<div id="whatever">
<form>
  <div class="controls controls-row">
    <label for="input1">label1</label>
    <input class="span2" type="text" id="input1">
  </div>
  <div class="controls controls-row">
    <label for="input2">label2</label>
    <input class="span2" type="text" id="input2">
  </div>
  <div class="controls controls-row">
    <label for="input3">label3</label>
    <input class="span2" type="text" id="input3">
  </div>
  <div class="controls controls-row">
    <label for="input4">label4</label>
    <input class="span4" type="text" id="input4">
  </div>
</form>
</div>

#whatever { 
  -moz-column-count: 2; 
  -webkit-column-count: 2; 
  column-count: 2; 
}
.controls-row { white-space: nowrap; }

form {
    display:table;
}

.controls-row {
    display: table-row;
}

.controls-row > label,
.controls-row > input {
    display: table-cell;
}