Question

我必须有3个问题。一个带单选按钮选项，一个带复选框，另一个带有textarea。我遇到的问题是所有问题都必须与每个问题下面的选择相同。我用一张表来解决同一行的问题，但我遇到的问题是我无法在每个适当的问题下得到选择（单选按钮，复选框和文本区域）。

这是我收到的：

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

我需要这个：

Your question here:       
Choice 1                                        
Choice 2

在该格式的问题旁边另外两个问题。

这是我在下面使用的html编码：

<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

我同意Nader的回答，但是为了回答你的问题，选项出现在问题旁边的原因显示在彼此旁边而不是在问题下面，因为你将它们放在同一个内的不同单元格中（使用） row（这是一个新列）。如果你要做第二行并且有一个单元格用于所有选择，那么它看起来更像你想要的东西。

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

我添加了一些造型，使它看起来更加分散。绘制表格的边框以了解事物是如何间隔开来的将是有用的。

Answer 2

好吧，我肯定会建议您使用div而不是表格（就个人而言，我不相信表格是合适的解决方案），据说，有三个div，全部左侧浮动，每个宽度为33％，将问题和答案发布在其中。 e.g。

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

以你的桌子作为解决方案，我认为你需要这个......

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

单选按钮，复选框和textarea

3 个答案: