0

我正在用这种外观编写表单布局（使用 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>
4

2 回答 2

1

display: table 和 table-cell 可以工作。

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

css

form {
    display:table;
}

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

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

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

于 2013-02-06T13:31:32.300 回答
1

您可以尝试column-count（浏览器兼容性）。您的 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 规则防止输入标签行中的换行符。

于 2013-02-06T12:49:41.383 回答