1

私は、テーブルを使用するのではなく、「CSS」の方法で物事を行うことを学ぼうとしています。次のようにレイアウトする必要がある基本的なフォームがあります。

Label 1: [Drop Down List]     Label 2: [Drop Down List]   Label 3: Drop Down List

まとめると、3つは左揃えになり、画面の幅全体を占めることはありません。ただし、ドロップダウンリスト要素のサイズは、それらを埋めるデータに基づいて動的になります。テーブルを使用している場合は、次のようにします。

<table border='0' cellpadding='0' cellspacing='0'>
  <tr>
    <td>Label 1:&nbsp;</td>
    <td style='padding-right:12px;'><select>...</select></td>

    <td>Label 2:&nbsp;</td>
    <td style='padding-right:12px;'><select>...</select></td>

    <td>Label 3:&nbsp;</td>
    <td style='padding-right:12px;'><select>...</select></td>
  </tr>
</table>

残念ながら、CSSを介してこれを行う方法がわかりません。任意の洞察をいただければ幸いです。

ありがとうございました！

4

2 に答える 2

2

HTML ですべての要素を並べて配置し、label要素display:inline-blockとmargin-left: 50px.

HTML

<label>Label 1 <select>...</select></label> 
<label>Label 2 <select>...</select></label> 
<label>Label 3 <select>...</select></label>

CSS

label {
 display: inline-block; /* perhaps not needed, as commented by cimmanon */
 margin-left: 50px;
}

ライブデモ
http://jsfiddle.net/Ezgtq/1/

于 2013-01-08T13:18:41.687 に答える
1 
Label: <select>....</select>
Label: <select>....</select>
Label: <select>....</select>

CSS:

select {
display:inline-block;
margin-left:12px;
width:40px; /* What You Want */
}

JSフィドル

于 2013-01-08T13:19:25.637 に答える