1

フルHDからスマートフォンまでサイズ変更可能なWebページ用のHTMLフォームを作りたいです。ラベルから入力までの距離を同じ距離にして、フォームをたとえば 600px の div に配置し、ラベルと入力フィールドを行の合計として 300px (パディング、マージンなどを含む) にする場合) フィールドが 2 列で並べられていること。サイズ変更後の div が 900px になると、フォームは 3 列に広がります。

フィールドは、次の方法で並べ替える必要があります。

2 列:

F1  F4
F2  F5
F3  F6

3 列:

F1  F3  F5
F2  F4  F6

私はHTMLとCSSに比較的慣れていないので、個人的には多くのdivでこれを行いますが、それは少し冗長であるか、コーディングが非常に悪いようです。これを a で実行しようとしました<span style="width:300px;">が、スパンが 300 ピクセルにならず、入力フィールドも含まれません。

私の現在のフォーム：

  <div class='main_text' style='width:55%;padding-left:10%;padding-right:10%;'>
     <label>Name:</label>
     <input id="name" type="text" value='Name'/><br />
     Age:
     <input id="age" type="text" value='21'/><br />
     Insterests:
     <input id="interests" type="text" value='Socer'/><br />
     Targets:
     <input id="targets" type="text" value='stop smoking for at least 2 years'/><br/>
     Other:
     <input id="other" type="text" value='I have 3 cats'/><br />
 </div>

つまり、質問は次のとおりです。

ブロックのようになるようにラベルを入力フィールドでグループ化するより効率的な方法はありますか?

PS ImはXHTML 1.0トランジショナルを使用しています

4

3 に答える 3

0

次のように、ラジオ ボタンとチェックボックス要素のタプルがラベルからラップされているのがよく見られます。

<label> <input /> text </label>

ただし、ブートストラップに関するより多くのより良い例を見つけることができます。

于 2013-06-13T14:09:25.803 に答える