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

干杯！！