间距HTML表格

我对网页结构的编码相当陌生。我在这里列出了一些项目。在目前的状态下，它的形式排在长队的页面之上。我希望这些表格彼此相邻。间距HTML表格

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

来源

2016-07-25 Nick Kaser

将这些表单放在两个div中，并使它们彼此相邻。 http://stackoverflow.com/questions/446060/css-two-divs-next-to-each-other –

你是否熟悉CSS？如果是这样，我会推迟CSS，而不是使用内联样式。它将保持您的代码更清晰，并为您提供比内联样式更多的选项。 –

喜检查，如果它是确定...

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

欢呼声！

来源

2016-07-25 01:49:27

谢谢，但我可能会去一个较小的百分比，因为我不需要太多的空间 –

只是一个例子，你可以改变你喜欢的所有％ –

将每个窗体包装在一个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>

来源

2016-07-25 01:50:54

回答

相关问题