радиокнопки, флажки и текстовые поля

Question

У меня должно быть 3 вопроса. Один с параметрами переключателя, один с флажками и один с текстовым полем. Проблема, с которой я столкнулась, состоит в том, что все вопросы должны быть в одной строке с выборами по каждому из этих вопросов. Я использовал таблицу, чтобы получить вопросы в одной строке, но проблема, с которой я столкнулась, заключается в том, что я не могу получить выбор (переключатель, флажки и область текста) по каждому соответствующему вопросу.

Это то, что я получаю:

Your question here: choice 1 choice 2. ques. here: c1, c2, c3, c4 

Мне нужно это:

Your question here:  
Choice 1           
Choice 2 

С 2 других вопросов, прямо рядом с этим вопросом в этом формате.

Это верстка я использую ниже:

<table> 
<tr> 
    <td align="left"> Your question here:</td>  
    <td><input name="choice" type="radio" value="1" />Choice 1 </td> 
    <br /> 
    <td><input name="choice" type="radio" value="2" checked="checked" />Choice 2</td> 

    <td align="center"> Your question here:</td> 
<br> 
    <td><input name="choice" type="checkbox" value="choice1" />Choice 1</td> 
<br>  
    <td><input name="choice" type="checkbox" value="choice2" />Choice 2</td> 
<br>  
    <td><input name="choice" type="checkbox" value="choice3" />Choice 3</td> 
<br>   
    <td><input name="choice" type="checkbox" value="choice4" checked="checked">Choice 4</td> 

<td align="right"> Your question here:</td> 
<td><br /><textarea name="other" rows="5" cols="35"></textarea></td> 


</tr> 
</table>  

Я попытался использовать для каждого из вариантов, но он отображается как вопросы и ответы непосредственно под друг с другом, и это не то, что мне нужно. Это сводит меня с ума, потому что я знаю, что это что-то простое. Кто-нибудь знает, как это исправить?

Answer 1

Ну, я бы определенно советовал вам использовать divs вместо таблиц (Лично я не убежден, что таблицы являются подходящим решением), при этом, имея в виду, есть три div, все плавающие влево, с шириной 33% каждый и размещать вопросы и ответы в них. , например.

<div> 
Question 1<br/> 
Choice 1 
Choice 2 
Choice 3 
</div> 

<div> 
Question 2<br/> 
Choice 1 
Choice 2 
Choice 3 
</div> 

<div> 
Question 3<br/> 
Choice 1 
Choice 2 
Choice 3 
</div> 

<style> 
div{ 
    width:33%; 
    float:left; 
} 
</style> 

Answer 2

хорошо с таблицами в качестве решения, я думаю, вам это нужно ...

<table> 
<tr> 
     <td > Your question here:</td> 
     <br /> 
     <td > Your question here:</td> 
     <br /> 
     <td > Your question here:</td> 
</tr> 

<tr> 
    <td> 
     <input name="choice" type="radio" value="1" />Choice 1 
     <br /> 
     <input name="choice" type="radio" value="2" checked="checked" />Choice 2 
    </td> 
    <td> 
     <input name="choice" type="checkbox" value="choice1" />Choice 1 
     <br /> 
     <input name="choice" type="checkbox" value="choice2" />Choice 2 
     <br /> 
     <input name="choice" type="checkbox" value="choice3" />Choice 3 
     <br />  
     <input name="choice" type="checkbox" value="choice4" checked="checked" />Choice 4 
    </td> 
    <td> 
     <textarea name="other" rows="5" cols="25"></textarea> 
    </td> 
</tr> 

</table> 

Answer 3

Я согласен с ответом Надера, но ответить на ваш вопрос, то причина выбора появится рядом с Вопросам появляются рядом друг с другом, в отличие от ниже Вопроса, потому что вы размещаете их в разных ячейках (используя) в пределах той же строки (это создает новый столбец). Если вы должны были сделать второй ряд и иметь 1 ячейку для всех вариантов, это выглядело бы как-то более похоже на то, что вы хотите.

<table> 
<tr> 
    <td align="left" style="width:200px;"> Your question here:</td> 
    <td align="center" style="width:200px;"> Your question here:</td> 
    <td align="right" style="width:200px;"> Your question here:</td> 
</tr> 
<tr> 
    <td align="left"> 
     <input name="choice" type="radio" value="1" />Choice 1 <br /> 
     <input name="choice" type="radio" value="2" checked="checked" />Choice 2</td> 

    <td align="center"> 
     <input name="choice" type="checkbox" value="choice1" />Choice 1 <br /> 
     <input name="choice" type="checkbox" value="choice2" />Choice 2 <br/> 
     <input name="choice" type="checkbox" value="choice3" />Choice 3 <br /> 
     <input name="choice" type="checkbox" value="choice4" checked="checked" />Choice  4 
    </td> 

    <td><br /><textarea name="other" rows="5" cols="30"></textarea></td> 
</tr> 
</table> 

Я добавил немного стилизации, чтобы он выглядел немного более разнесенным. Было бы полезно нарисовать границы таблиц, чтобы увидеть, как вещи разнесены.