1

私はstackoverflowで同様の質問をいくつか見つけましたが、どれも私のケースに真の明確な解決策を提供していないようです.

スクリーンショットで、テーブルを使用する際の苦痛を示すことができれば幸いです。

ここに画像の説明を入力

下の 2 つの行は、テーブル内で定義されtrています。td構造は完璧で、ラベルとテキストフィールドの配置も完璧です。wellただし、2 行だけでクラス (たとえば)のスタイルを設定したい場合<div class='well'> ... </div>、テーブル アプローチは失敗します。divテーブル内に何も持つことが許可されていないという理由だけで、これは と を除いtrてのみtdです。

そこで、テーブルから最初の 2 行を取り出し、純粋な div として作成しました。結果は、灰色の井戸の上にある最初の 2 行として確認できます。

<div class='well'>
  <div>
    <div class='block_inline'> ... </div>
    <div class='block_inline'> ... </div>
  </div> 
  <div>
    <div class='block_inline'> ... </div>
    <div class='block_inline'> ... </div>
  </div>
</div>

クラス自体はwell2 つの行の周りに美しくレンダリングされるようになりましたが、配置がごちゃごちゃになっています。それらを中央に配置し、テキストフィールドを垂直方向に並べて配置するにはどうすればよいですか?

4

4 に答える 4

3

div を使用してこの効果を得るには、table、table-row、および table-cell で display プロパティを使用するだけです。

HTML:

<div class='well'>
  <div class="row">
    <div class='block_inline'> Title </div>
    <div class='block_inline'> ... </div>
  </div> 
  <div class="row">
    <div class='block_inline'> Due Date Time </div>
    <div class='block_inline'> ... </div>
  </div>
</div>​

CSS:

div
{
    border: 1px solid #333;
}

.well
{
    display: table;
    width: 70%;
}

.row
{
    display: table-row;
}

.block_inline
{
    display: table-cell;
    width: 50%;
}

これはテーブルの動作を模倣しますが、マークアップは適切でセマンティックなままです。これは、「残りのスペースの列」の問題を解決するのにも役立ちます:)

http://jsfiddle.net/Kyle_Sevenoaks/e7VeU/

于 2012-11-20T13:13:34.440 に答える
2

まず第一に、セマンティクスが混乱しています..これは私がそれを行う方法です:

<form>
    <div class="row">
        <label for="input_1">Title</label>
        <input type="text" name="input_1" id="input_1">
    </div>
    <div class="row">
        <label for="input_2">Due date time*</label>
        <input type="text" name="input_2" id="input_2">
    </div>

</form>

スタイル付き:

div.row {
    clear: both;
}

label {
    display: inline-block;
    width: 300px;
}

input {
    display: inline-block;
}

必要に応じて調整します。

の使用はdiv class="row"、フィールドセットと定義リストに置き換えることができます。そのためにhttp://www.gethifi.com/blog/html-forms-the-right-waysを見てください。

于 2012-11-20T13:08:57.760 に答える
2

フォーム レイアウトに UL を使用するのが好きです: http://jsfiddle.net/BKgB9/

<form>
 <div>
    <ul>
        <li><label>Type:</label><input type="text" /></li>
        <li><label>Reminder:</label><input type="text" /></li>
    </ul>
 </div>
</form>

div {
 background:#dcdcdc;
 border:1px solid #999;
 padding:20px;
 display:inline-block;
}

div ul li {
 margin-bottom:10px;
}

div ul li label {
 float:left;
 width:85px;
}
于 2012-11-20T13:20:07.940 に答える
0

この方法を試すこともできます

<div class="first">
<div class="line1">
   <label>One</label>
   <select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
    </div>
    <div class="line2">
    <label>two</label>
   <select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
</div>
<div>

デモ; フィドル

于 2012-11-20T13:17:30.070 に答える