4

ラベルと対応するフィールド (入力要素またはより複雑な要素) を持つ一連のフォームを作成しています。

ラベルは左側に、フィールドは右側に表示されます。特定のフォームのラベルはすべて、フィールドがすべて垂直に並ぶように特定の幅にする必要があります。

これを達成するには2つの方法があります（おそらくそれ以上？）：

  1. Rows : 各ラベルと各フィールドを左にフロートします。各ラベルとフィールドをフィールド行の div/コンテナーに入れます。ラベルの幅を特定の数値に設定します。このアプローチでは、異なるフォームのラベルは、最も長いラベルのテキストの幅に依存するため、異なる幅になります。

  2. 列: すべてのラベルを 1 つの div/コンテナーに配置して左にフローティングし、すべてのフィールドを別の左にフローティング コンテナーに配置し、左パディングを設定します。この方法では、列レイアウトと左パディングがすべてのフィールドの垂直方向の整列を均一に処理するため、ラベルとラベル コンテナーでさえ幅を設定する必要はありません。

したがって、アプローチ #2 は実装が簡単に思えますが (幅を常に設定する必要がないため)、ラベルとそのラベルに関連付けられたフィールドがグループ化されていないため、オブジェクト指向性も低いと思います。 、アプローチ＃1にあるように。また、フォームを動的に構築する場合、アプローチ #2 は のような関数ではうまく機能しませんaddRow(label, field)。これは、1 つのフィールド行要素を作成/追加するだけでなく、ラベルとフィールド コンテナーについて知る必要があるためです。

どちらのアプローチが良いと思いますか? これら2つよりも優れた別のアプローチはありますか?

4

3 に答える 3

3

アプローチ #1 は、主に柔軟性と Kevin Boucher によって言及されたその他のポイント、および動的な作成に関する独自のポイントに関連する多くの理由ではるかに優れています。

要素を含まないことはお勧めしません-それは十分に可能ですが-パディング、ポジショニング、オーバーフロー処理に関して多くの余分な力を否定します. また、動的な作成がより難しくなります。

クラスを介してcssでラベルコンテナの幅を1つ設定でき、これは簡単に変更またはレスポンシブに設計できることを考えると、アプローチ＃2を使用するための引数も利点である必要はありません。基本的に、ラベルの寸法を変更する場所が 1 つしかないことを意味します。

また、＃2では、水平ラベルレイアウトをより自動化しますが、垂直レイアウトは、整列するためにラベルとフィールドコンテナーを同じ高さにする必要があることを考えると、より手動で扱いにくいものになります（それらは相互の親）。列よりも多くの行があると推測するので、これは作業を追加するだけです;）

CSS:

.field-row {
  overflow: hidden;
}

.field-row label {
  display: block;
  width: 30%;
  float: left;
}

.field-row .field-container {
  width: 70%;
  float: left;
}

マークアップ:

<div class="field-row">
  <label>Label Text</label>
  <div class="field-container">
    <input type="text" />
  </div>
</div>

私が今まで必要としていたことのほとんどをカバーするので、私はおそらく上記の方法を選びますが、アプリで発生する可能性のある将来の変更に関してより詳細に制御したい場合は、次のことを行うことができます。

CSS2:

.field-row {
  overflow: hidden;
}

.field-row .label-container {
  width: 30%;
  float: left;
}

.field-row .field-container {
  width: 70%;
  float: left;
}

マークアップ 2:

<div class="field-row">
  <div class="label-container"><label>Label Text</label></div>
  <div class="field-container">
    <input type="text" />
  </div>
</div>

追加のラッパーを 1 つ追加するだけで、より複雑なラベル(つまり、テキストを非表示にして画像に置き換える、または js を使用して説明テキストを追加する) を使用できるようになります。また、中央揃えまたは右揃えに関してより多くの制御が可能になります。

とにかく私の考えだけです:)

于 2012-10-23T22:52:19.300 に答える
2

ない。CSS で行う - div を含める必要はありません。例えば：

<style>
  form { width: 28em; margin: 5px; padding: 5px; border: solid #000 1px; }
  label { width: 6em; float: left; text-align: right; margin: .5em 1em; clear: both; border: dashed #666 1px; }
  input, textarea { margin: .5em 0; width: 17em; }
</style>

<form>
  <label for="first">First Name:</label>
  <input type="text" name="first_name" id="first" size="20" maxlength="50" />
  <label for="last">Last:</label>
  <input type="text" name="last_name" id="last" size="20" maxlength="50" />
</form>

http://jsfiddle.net/k4xEG/

于 2012-10-23T22:25:06.583 に答える
0

行はdivのみを使用してアプローチします。ここにjsFiddle：http: //jsfiddle.net/v7R8j/1/

HTML：

<form>
<div class="label">Type text:</div>
<div class="field"><input type="text"/></div>
<div class="clear"></div>

<!-- ... -->

<div class="label">Submit button:</div>
<div class="field"><input type="submit"/></div>
<div class="clear"></div>
</form>

CSS：

.label {
    width: 150px;
}
.field, .label {
    float: left;
    border: 1px solid orange;   
    padding: 4px;
    margin: 4px;
}

.clear {
    clear:both;   
}
于 2012-10-23T22:36:43.790 に答える