Интервал 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> 

я тестировал, используя стиль = «Правое поле: 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 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>

ура !!

Answer 2

оберните каждую форму в 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>