間隔HTML表單

Question

在網頁結構方面，我是相當陌生的人。 我在這里列出了一些項目的兩種形式。 在當前狀態下，表格沿頁面排很長。 我希望表格彼此相鄰。

<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>

我使用style =“ margin-right：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中，然后將它們浮動，並給出50％的寬度；

最喜歡的是，我對網頁結構的編碼還很陌生。 我在這里列出了一些項目的兩種形式。 在當前狀態下，表格沿頁面排很長。 我希望表格彼此相鄰。

<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>

Answer 2

嗨，檢查是否還可以...

 <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> 

干杯！！