スペーシングHTMLフォーム

Question

ウェブページの構造に関してコーディングがかなり新しいです。私はここにいくつかの項目をリストする2つのフォームを持っています。現在の状態では、フォームは長い行でページの下に移動します。フォームをお互いに隣り合わせにしたいと思っています。

<form name="meats"> 
<h2>Select one Protien</h2> 
<p><input type="checkbox" name="meat" value="grilledchicken" /> 
Grilled Chicken: <br /><img src="grillchicken.jpg"> 
</p> 

<p><input type="checkbox" name="meat" value="salmon" />Seared Salmon: <br /><img src="ssalmon.jpg"> 
</p> 

<p><input type="checkbox" name="meat" value="lamb" /> 
Roast Lamb: <br /><img src="lamb.jpg"> 
</p> 

<p><input type="checkbox" name="meat" value="Steak" /> 
Grilled Steak: <br /><img src="steak.jpg"> 
</p> 

<p><input type="checkbox" name="meat" value="tofu" /> 
Marinated Tofu: <br /><img src="tofu.jpg"> 
</p> 

私はスタイル=使用してテスト「余白 - 右：5em」それだけで右にフォーム上にシフトし、次の他のフォームにそれを持っていませんでした。

<form style="margin-left:20em" name="vegetables"> 
<h2>Select your vegetables</h2> 

<p><input type="checkbox" name="veg" value="broco" /> 
Broccoli: <br /><img src="brocc.jpg"> 
</p> 

<p><input type="checkbox" name="veg" value="Aspar" /> 
Asparagus: <br /><img src="aspar.jpg"> 
</p> 

<p><input type="checkbox" name="veg" value="sprouts" /> 
Brussel Sprouts: <br /><img src="sprouts.jpg"> 
</p> 

<p><input type="checkbox" name="veg" value="redBell" /> 
Red Bell Pepper: <br /><img src="redbell.jpg"> 
</p> 

<p><input type="checkbox" name="veg" value="eggP" /> 
Eggplant: <br /><img src="eggp.jpg"> 
</p> 

Answer 1

こんにちは、それは大丈夫だ場合...

<div style="width:50%;float:left;"><form name="meats"> 
 
<h2>Select one Protien</h2> 
 
<p><input type="checkbox" name="meat" value="grilledchicken" /> 
 
Grilled Chicken: <br /><img src="grillchicken.jpg"> 
 
</p> 
 

 
<p><input type="checkbox" name="meat" value="salmon" />Seared Salmon: <br /><img src="ssalmon.jpg"> 
 
</p> 
 

 
<p><input type="checkbox" name="meat" value="lamb" /> 
 
Roast Lamb: <br /><img src="lamb.jpg"> 
 
</p> 
 

 
<p><input type="checkbox" name="meat" value="Steak" /> 
 
Grilled Steak: <br /><img src="steak.jpg"> 
 
</p> 
 

 
<p><input type="checkbox" name="meat" value="tofu" /> 
 
Marinated Tofu: <br /><img src="tofu.jpg"> 
 
</p> 
 
</form> 
 
</div> 
 
<div style="width:50%;float:left;" > 
 
<form style="margin-left:20em" name="vegetables"> 
 
<h2>Select your vegetables</h2> 
 

 
<p><input type="checkbox" name="veg" value="broco" /> 
 
Broccoli: <br /><img src="brocc.jpg"> 
 
</p> 
 

 
<p><input type="checkbox" name="veg" value="Aspar" /> 
 
Asparagus: <br /><img src="aspar.jpg"> 
 
</p> 
 

 
<p><input type="checkbox" name="veg" value="sprouts" /> 
 
Brussel Sprouts: <br /><img src="sprouts.jpg"> 
 
</p> 
 

 
<p><input type="checkbox" name="veg" value="redBell" /> 
 
Red Bell Pepper: <br /><img src="redbell.jpg"> 
 
</p> 
 

 
<p><input type="checkbox" name="veg" value="eggP" /> 
 
Eggplant: <br /><img src="eggp.jpg"> 
 
</p> 
 
</form> 
 
    </div>

歓声をチェック！

Answer 2

div内の各フォームを折り返して50％の幅を与えます。

お気に入り 私はウェブページの構造に関してかなり新しいです。私はここにいくつかの項目をリストする2つのフォームを持っています。現在の状態では、フォームは長い行でページの下に移動します。フォームをお互いに隣り合わせにしたいと思っています。

<div style="width:48%;float:left;margin-right:2%"> 
<form name="meats"> 
<h2>Select one Protien</h2> 
<p><input type="checkbox" name="meat" value="grilledchicken" /> 
Grilled Chicken: <br /><img src="grillchicken.jpg"> 
</p> 

<p><input type="checkbox" name="meat" value="salmon" />Seared Salmon: <br /><img src="ssalmon.jpg"> 
</p> 

<p><input type="checkbox" name="meat" value="lamb" /> 
Roast Lamb: <br /><img src="lamb.jpg"> 
</p> 

<p><input type="checkbox" name="meat" value="Steak" /> 
Grilled Steak: <br /><img src="steak.jpg"> 
</p> 

<p><input type="checkbox" name="meat" value="tofu" /> 
Marinated Tofu: <br /><img src="tofu.jpg"> 
</p> 

</form> 
</div> 


<div style="width:48%;float:left;"> 
<form style="margin-left:20em" name="vegetables"> 
<h2>Select your vegetables</h2> 

<p><input type="checkbox" name="veg" value="broco" /> 
Broccoli: <br /><img src="brocc.jpg"> 
</p> 

<p><input type="checkbox" name="veg" value="Aspar" /> 
Asparagus: <br /><img src="aspar.jpg"> 
</p> 

<p><input type="checkbox" name="veg" value="sprouts" /> 
Brussel Sprouts: <br /><img src="sprouts.jpg"> 
</p> 

<p><input type="checkbox" name="veg" value="redBell" /> 
Red Bell Pepper: <br /><img src="redbell.jpg"> 
</p> 

<p><input type="checkbox" name="veg" value="eggP" /> 
Eggplant: <br /><img src="eggp.jpg"> 
</p> 

</form> 

</div>