表格的整行可点击答案

【问题标题】：Entire row of the form clickable表格的整行可点击
【发布时间】：2014-06-07 07:30:28
【问题描述】：

我有这个表格：

这样编码的：

{% for answer in answers %}
    <tr>
       <td>
          <label>
              <input type="radio" name="guess" value="{{ answer.id }}" class="form-radio">
              {{ answer.content }}
          </label>
       </td>
    </tr>
{% endfor %}

但是，这样，用户只能点击单选按钮来回答问题。但是，我想让答案的所有行都可以点击。如何更改此代码以使整行可点击？

【问题讨论】：

检查这个 qus：stackoverflow.com/questions/20982993/… 你已经定义了你的 url 模式，它可以接受多个值....

标签： html

【解决方案1】：

大多数浏览器都会切换您的单选按钮选择

单击单选框/复选框小部件
点击标签元素本身。

您可以通过将标签的 CSS 修改为 100% 宽度并显示为“内联块”来轻松地使整个“行”可点击

label {
    /* whatever other styling you have applied */
    width: 100%;
    display: inline-block;
}

附带说明：通常认为将表单数据放在表格中只是为了格式化是不好的做法。我建议将其放在无序列表中，因为这样在语义上更正确。

【讨论】：

【解决方案2】：

你应该把你的html改成这样的

  <tr>
    <td>
      <input type="radio" name="guess" id="guess_{{ answer.id }}" value="{{ answer.id }}" class="form-radio">
      <label for="guess_{{ answer.id}}">{{ answer.content }}</label>
    </td>
  </tr>

示例 html here

【讨论】：

谢谢！但是这种方式只能在文本中点击，而不是在整行中。