1

これが私が持っているものです。DIV タグで遊んだのですが、このページをデザインするためにそれらを使用する方法がわかりません。

ここに画像の説明を入力

私が抱えている問題の 1 つは、「Alias」ラベルをその下にある TextBox に正しく配置できないことです...また、これらのコントロールを同じ行に配置します。たとえば、参照シーケンスと祖先は、私ができなかった別の問題ですまだ直します。

4

3 に答える 3

1

上部の 2 つの div (青と緑) をフロートし、それぞれに幅を設定し、青の上に右マージン (または緑の上に左マージン) を投げて、必要な赤のスペースを取得します。下の div をクリアして、次の行にスキップします。

「エイリアス」ラベルと配置の問題については、順序付けられていないリストを使用することをお勧めしlist-style:noneます。li各ラベルは、各入力と同様に独自のものになります。これにより、現在のフォームの場合と同様に、自動的に左揃えになります。さらに、幅をハード設定する必要がないという利点があります (この場合、それが問題であると言える場合)。

マークアップの例

<li><label>Alias</label></li>
<li><input type='text'></li>
于 2011-06-20T20:45:47.027 に答える
1

本当に表形式のデータでない限り、テーブルを考慮すべきではありません。青と緑のスペースはdiv、幅が設定された要素で、左にフロートすることをお勧めします。グレーdivをクリアする必要があります。緑と青のセクションはレイアウトの便宜上分離されているようで、関連するコンテンツではないため、要素をfieldset超えることはお勧めしません。div

labeland input/ selectelements set widths を指定して を使用するとdisplay: block、ラベルの表示は問題になりません。Not Found リンクとチェックボックスは、フォームの唯一の固有部分のようです。

于 2011-06-20T20:40:03.043 に答える
1

これを試して。それが機能する可能性があります。必要に応じて、いくつかのスタイル値を微調整する必要がある場合があります。

<div style="clear:both">
  <div id="topLeft" style="float:left;width:400px;padding:7px">

     <div style="clear:both;margin:5px 0">
       Gene Symbol
     </div>
     <div style="clear:both;margin:5px 0">
        //drop 'Gene Symbol Search Box' here
     </div>


     //repeat Gene Symbol like divs for other elements

  </div>

  <div id="topSeparator" style="float:left;width:10px">
    &nbsp;
  </div>

  <div id="topRight" style="float:left;width:400px;padding:7px">
     <div style="clear:both;margin:5px 0">
       Alias
     </div>
     <div style="clear:both;margin:5px 0">
        //drop 'Alias Box' here
     </div>


     //repeat Alias like divs for other elements

  </div>
</div>
<div style="clear:both;margin:10px 0 0 0;padding:7px">
  <div style="clear:both;margin:5px 0">
    //drop checkbox here
  </div>
  <div style="clear:both;margin:5px 0">
    //drop buttons here
  </div>
</div>
于 2011-06-20T21:12:16.180 に答える