间距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 =＆＃34; margin-right：5em＆＃34;但它只是将表格移到了右边，并没有把它提到另一个表格旁边。

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

欢呼声!!