将单选按钮与 HTML 中的标签对齐

Question

我有用于多项选择的单选按钮。单选按钮的标签可以由多行组成（参见下面的示例）（从技术上讲，它们可以是迷你网页）。

如何生成一个看起来像第二个示例（如下）的表单，并在单击其标签时选择单选按钮（没有 javascript），如下面的第一个示例中实现的那样？

第一个例子：

<div class="answers">
  <label>
    <input type="radio" name="answer" value="336"/>
    <i><p>Morbi consequat at mi vitae hendrerit. </p>
       <p>Quisque pharetra, mauris id blandit <strong>consectetur</strong>.</p>
    </i>
</label>
  <br>
  <label>
    <input type="radio" name="answer" value="337"/>
    <i><p>Morbi consequat at mi vitae hendrerit. Quisque pharetra, mauris id
        blandit consectetur, erat risus mattis quam, ac venenatis felis ante nec
        mi. Curabitur diam lectus, ultrices a consequat sodales, laoreet eu
        odio. Quisque sit amet pulvinar ligula. Sed ullamcorper metus non odio
        sagittis malesuada. Fusce a lorem nisl. Fusce eu magna sed ante blandit
        semper. Vivamus pulvinar nulla nec elit pharetra vestibulum.</p>
    </i>
</label>
  <br>
  <label>
    <input type="radio" name="answer" value="338"/>
    <i><p><img alt="alt text"           src="https://upload.wikimedia.org/wikipedia/commons/9/90/Wikipedia_article_count_graph_28_march_2003.png"
               title="Logo Title Text 1"></p>
    </i>
</label>
</div>

第二个例子：

<div class="answers">
  <table border="0">
    <tr style="vertical-align: middle;">
      <td style="text-align: center;">
        <input type="radio" name="answer" value="336" />
      </td>
      <td>
        <label>
      <i><p>Morbi consequat at mi vitae hendrerit. </p>
         <p>Quisque pharetra, mauris id blandit <strong>consectetur</strong>.</p>
      </i>
  </label>
      </td>
    </tr>
    <tr style="vertical-align: middle;">
      <td style="text-align: center;">
        <input type="radio" name="answer" value="337" />
      </td>
      <td>
        <label>
      <i><p>Morbi consequat at mi vitae hendrerit. Quisque pharetra, mauris id
          blandit consectetur, erat risus mattis quam, ac venenatis felis ante nec
          mi. Curabitur diam lectus, ultrices a consequat sodales, laoreet eu
          odio. Quisque sit amet pulvinar ligula. Sed ullamcorper metus non odio
          sagittis malesuada. Fusce a lorem nisl. Fusce eu magna sed ante blandit
          semper. Vivamus pulvinar nulla nec elit pharetra vestibulum.</p>
      </i>
  </label>
      </td>
    </tr>
    <tr style="vertical-align: middle;">
      <td style="text-align: center;">
        <input type="radio" name="answer" value="338" />
      </td>
      <td>
        <label>
      <i><p><img alt="alt text"           src="https://upload.wikimedia.org/wikipedia/commons/9/90/Wikipedia_article_count_graph_28_march_2003.png"
                 title="Logo Title Text 1"></p>
      </i>
  </label>
      </td>
    </tr>
  </table>

Answer 1

我最好的建议是先用谷歌搜索这类问题。我自己google了一下，马上找到了这个例子：https://css-tricks.com/almanac/selectors/c/checked/