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

回答

相關問題