Question

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

+-----------------container------------------+
|                                            |
|  label1    [ input ]    label2   [ input ] |
|  label3    [ input ]    label4   [ input ] |
|  label5    [ input ]    label6   [ input ] |
|                                            |
+--------------------------------------------+

[input]元素是固定大小的。我需要正确对齐两列标签，但我不希望它们具有相同的宽度。换句话说，我将标签扩展到该列的最宽标签。

有可能吗？

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

<div id="whatever">
<form>
  <div class="controls controls-row">
    <label for="input1">label1</label>
    <input class="span2" type="text" id="input1">
    <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">
    <label for="input4">label4</label>
    <input class="span4" type="text" id="input4">
  </div>
</form>
</div>

Answer 1

您可以尝试column-count（browser-compatibility）。您的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：

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

第二个CSS规则可防止输入标签行中的换行符。

Answer 2

display：table，table-cell可以工作。

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

CSS

form {
    display:table;
}

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

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

jsFiddle演示：http://jsfiddle.net/Mxx4M/

拉伸元素以适合容器

2 个答案: