Выравнивание радио-кнопок с метками в HTML - PullRequest
Новая
       16

Выравнивание радио-кнопок с метками в HTML

0 голосов
/ 21 декабря 2018

У меня есть переключатели для выбора нескольких вариантов.Метки переключателей могут состоять из нескольких строк (см. Примеры ниже) (технически они могут быть мини-веб-страницами).

Как мне создать форму, которая выглядит как второй пример (ниже), и выбрать переключатель, когда щелкает ее метка (без 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>

1 Ответ

0 голосов
/ 21 декабря 2018

Мой лучший совет - сначала спросите этот вопрос.Я сам погуглил и сразу нашел этот пример: https://css -tricks.com / almanac / selectors / c / checked /

...