Question

我创建了测验模板。有单选按钮。但我不想要并排。我想要一个在另一个之下。

为什么<br/>标签不起作用我不明白..你能帮我吗？

这是我的代码

<tr>
  <td colspan="2">
    <b>1)"Men are basically little piglets...Males are biologically driven to go out and hunt giraffes."</b>
  </td>
</tr>

<tr id="0">
    <td onmouseover="checkSelect(this)" onmouseout="setBGDefault(this)" onclick="applySelect(this,0)"><input type="radio" name=que_1 value="1" />Newt Gingrich</td>
<br>
<td onmouseover="checkSelect(this)" onmouseout="setBGDefault(this)" onclick="applySelect(this,1)"><input type="radio" name=que_1 value="0" />Dwight Schrute</td>
<br>
<td onmouseover="checkSelect(this)" onmouseout="setBGDefault(this)" onclick="applySelect(this,1)"><input type="radio" name=que_1 value="0" />Dwight Schrute</td>
<br>
<td onmouseover="checkSelect(this)" onmouseout="setBGDefault(this)" onclick="applySelect(this,1)"><input type="radio" name=que_1 value="0" />Dwight Schrute</td>
<br>
</tr>

<tr id="correct" style="display:none">
  <td colspan="2">Correct! This is from a controversial lecture on the military that Gingrich delivered while teaching at Reinhardt College. He also said that "females have biological problems staying in a ditch for thirty days because they get infections and they don't have upper body strength," when referring to women participating in combat missions.</td>
</tr>

<tr id="wrong" style="display:none;">
     <td colspan="2">Doh, wrong. This is from a controversial lecture on the military that Gingrich delivered while teaching at Reinhardt College. He also said that "females have biological problems staying in a ditch for thirty days because they get infections and they don't have upper body strength," when referring to women participating in combat missions.</td>
</tr>

Answer 1

br元素不是tr元素的有效子元素。如果您希望所有复选框都在不同的行上，只需将它们全部添加到同一个td元素中，并将每个input包装在label中：

<td ...>
    <label>
        <input type="radio" name=que_1 value="1" />
        Newt Gingrich<br>
    </label>
    <label>
        <input type="radio" name=que_1 value="0" />
        Dwight Schrute<br>
    </label>
    ...
</td>

然后，您需要将鼠标事件添加到每个label而不是每个td元素：

<label onmouseover="checkSelect(this)"
       onmouseout="setBGDefault(this)"
       onclick="applySelect(this,0)">
    ...
</label>

你也可以用一点CSS完全放弃br：

td label {
    display:block;
}

JSFiddle demo

Answer 2

为什么你为每个单选按钮使用Table。您可以使用ul并在每个li中按下您的单选按钮：

<ul id='0'>
   <lionmouseover="checkSelect(this)" onmouseout="setBGDefault(this)" onclick="applySelect(this,0)"><input type="radio" name=que_1 value="1" />Newt Gingrich </li>
     .
     .
     .
</ul>

如果您必须使用table ，则可以将所有单选按钮放在一个td中，并在其后添加br标记。

或

将任何单选按钮放在一个tr标记
中

Answer 3

这是因为您正在使用表格。你的单选按钮都在标签中，这意味着每个单选按钮都是列的一部分。除非你将每个输入放在一个tr标签中，否则它只会崩溃：

<tr><td><input id="answer_1" type="radio" /><label for="answer_1">Answer 1</label></td></tr>
<tr><td><input id="answer_2" type="radio" /><label for="answer_2">Answer 2</label></td></tr>
<tr><td><input id="answer_3" type="radio" /><label for="answer_3">Answer 3</label></td></tr>

我的战争是彻底取出桌子而不是这样做：

<input id="answer_1" type="radio" /><label for="answer_1">Answer 1</label><br>
<input id="answer_2" type="radio" /><label for="answer_2">Answer 2</label><br>
<input id="answer_3" type="radio" /><label for="answer_">Answer 3</label><br>

标签用于标记复选框和收音机等输入。这对于屏幕阅读器很有用，如果单击文本，它将检查单选按钮。这是一个小提琴： http://jsfiddle.net/8DLXw/

表格单选按钮与br标记

3 个答案: