0

私はこの外観のフォームレイアウトを書いています（Bootstrapを使用していますが、それは私の質問には関係ないと思います）：

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

[input]要素は固定サイズです。ラベルの2つの列を正しく配置する必要がありますが、同じ幅にしたくありません。つまり、その列の最も幅の広いラベルに展開するようにラベルを必要とします。

できますか？

これは多かれ少なかれ私が使用している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

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; }

2番目のCSSルールは、入力ラベル行内の改行を防ぎます。

于 2013-02-06T12:49:41.383 に答える
1

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/

于 2013-02-06T13:31:32.300 に答える