-1

通常のASP.NetMVCに従って、フィールドラベルdivとフィールドエディターdivを使用して編集ページを作成しました。その結果、次のHTMLが作成されます。

<div class="editor-label">
  <label for="Code">Project Code</label>
</div>
<div class="editor-field">
  <input id="Code" name="Code" type="text" value="" />
</div>

上記のdivのペアは、私のフォームにある編集可能なフィールドの数だけ繰り返されます。デフォルトでは、これらはページ上で上下に表示されます。私が達成したいのは、CSSを使用してページをテーブルレイアウトで表示することです。だから私のCSSは次のようなものです：

.field-label, .field-editor{
display: table-cell;
}

これにより、ブラウザウィンドウの最後で折り返され、すべてが隣り合ったセルに表示されます。ビューにマークアップを追加せずに、各field-editor divの後（または各field-label divの前）に新しい行を強制するにはどうすればよいですか？これは、displayを割り当てる新しいdivのように、ビューにマークアップを追加することで簡単になることを理解しています：table-row。しかし、ラベルとエディターの組み合わせの各セットの間にこのマークアップを追加する必要があり、それはDRYの原則に違反しているように感じます。したがって、この追加のマークアップを行う必要なしにこれを実行したいと思います。

4

1 に答える 1

0

上記のHTMLが与えられると、次のCSSが機能します。

.editor-label, .editor-field {
    display: inline-block;
    width: 48%;
}

.editor-label {
    text-align: right;
}

これにより、要素が同じ線を共有し、割り当てられた幅（この場合は親要素の幅に対して）を取ることができます。宣言は、単に要素の近くに視覚的にtext-alignテキストを配置することです。labelinput

JSフィドルデモ。

もちろん、異なる幅を使用して、要素labelとinput要素を不必要にdivsでラップすることなく、同じ結果を得ることができます。

もう少し整理されたバージョン：

label, input {
    display: inline-block;
}

label {
    text-align: right;
    width: 20%;
}

input {
    width: 30%;
    margin-right: 30%;
}

JSフィドルデモ。

はmargin-right単純に宣言されているため、、、およびその累積幅はlabel、次の行が同じ行を占めるのに十分なスペースを残しません。inputmargin-rightlabel

于 2012-05-19T19:21:59.487 に答える