1

フォーマットする必要がある HTML フォームがあります。これは長い形式であり、フォーム全体にアクセスするには (垂直に) スクロールする必要があります。ここで、フォーム フィールドの右側に多くの余白があるので、フォームを 3 つのセクションに分割し、1 つの長い垂直フォームと比較して、水平方向に 3 つのセクションを表示したいと考えています。

現在のレイアウト:

Field1
Field2
Field3
Field4
Field5
Field6

新しいレイアウト:

Field1     Field3     Field5
Field2     Field4     Field6

これにアプローチする最良の方法は何ですか？

前もって感謝します

4

4 に答える 4

2

正しいタブ オーダーを実現するには (手動で設定したくない場合)、列ごとに 1 つのラッパー要素を作成し、それらを隣同士に配置する必要があります。

<div class="col">
<label>Field1 <input type="text"/></label>
<label>Field2 <input type="text"/></label>
</div>
<div class="col">
<label>Field3 <input type="text"/></label>
<label>Field4 <input type="text"/></label>
</div>
<div class="col">
<label>Field5 <input type="text"/></label>
<label>Field6 <input type="text"/></label>
</div>

CSS:

.col{
  width: 30%;
  float: left;
}

...そしてここにjsFiddleがあります。

于 2012-07-13T18:25:20.307 に答える
1

DIV と CSS を簡単に使用できます

<div class="divContainer">
@foreach(var item in Model.YourCollectionProperty)
{
  <div class="divItem">
       Some content here
  </div>
}
</div>

このCSSを今すぐ入手してください

.divContainer
{
   width:100%;
}
.divItem
{
  width:33%; float:left;
}
于 2012-07-13T18:26:22.737 に答える
0

3 列のテーブルを使用するか、div を使用できます。

于 2012-07-13T18:23:00.773 に答える
0

テーブルではなくレイアウトにはcssでdivを使用することをお勧めします

table は表形式のデータに適していますが、それ以上のデータが必要な場合は div の方が適しています

http://www.w3schools.com/html/html_layout.asp

于 2012-07-13T18:25:02.630 に答える