Как оформить радио кнопки для нескольких абзацев?

Question

Я пытаюсь установить переключатели для большого выбора абзацев с несколькими строками.

Но как сделать так, чтобы радио-кнопка появлялась не в начале, а как я уже упоминал на картинке.

Я могу разделить элементы в списке на строки, но переключатели фактически появляются в начале элемента, как обычные буквы в тексте. введите описание изображения здесь

Вот код, который я пробовал для элементов списка

<ul>
    <span>
        <input type="radio" name="pokemon1" required>
        <b>AT&ampT SOUTHWEST</b></br>
        <p>Multiple lines text</p>
        </div>
    </span>
    <hr/ style="margin-top:5px; margin-bottom:5px;">
    <span>
        <input type="radio" name="pokemon1" required>
        <b>AT&ampT SOUTHWEST</b></br>
        <p>Multiple lines text</p>
    </span>
    <hr/ style="margin-top:5px; margin-bottom:5px;">
    <span>
        <input type="radio" name="pokemon1" required>
        <b>AT&ampT SOUTHWEST</b></br>
        <p>Multiple lines text</p>
    </span>
    <hr/ style="margin-top:5px; margin-bottom:5px;">
    <span>
        <input type="radio" name="pokemon1" required>
        <b>AT&ampT SOUTHWEST</b></br>
        <p>Multiple lines text</p>
    </span>
</ul>

Answer 1

Я думаю, что fcalderan уже дал лучший ответ - он даже дал вам CSS.

Просто чтобы подтвердить свою точку зрения. Вы используете тег label для маркировки ваших входов. Затем вы можете использовать атрибут 'for' следующим образом: 'for = "place-id-of-input-here"' внутри вашей метки, чтобы указать метку для ввода. Это делает ярлык кликабельным (вы можете щелкнуть текст, а также щелкнуть переключатель). Кроме того, вы можете настроить таргетинг на две части вашего ввода по отдельности, на ввод и метку (как это сделал fcalderan).

Надеюсь, это поможет, J.

Answer 2

Демонстрация Codepen

---

Сначала я хотел бы использовать более значимую разметку, используя элемент <label for="...">, сохраняя стиль вне разметки иудаление элемента <hr>, например

<fieldset>
  <ul>
    <li>
      <input type="radio" id="rb1" name="rb" />
      <label for="rb1">This label <br>is 3 lines <br />long</label>
    </li>
    <li>
      <input type="radio" id="rb2" name="rb" />
      <label for="rb2">This label <br>is 4 <br />lines <br />long</label>
    </li>
    <li>
      <input type="radio" id="rb3" name="rb" />
      <label for="rb3">This label <br>is 3 lines <br />long</label>
    </li>
  </ul> 
</fieldset>

, поскольку все радиобоксы должны принадлежать одному fieldset, а у вас есть list радиобокс.Вертикальное выравнивание можно легко выполнить, используя Flexbox для элементов списка, сместив элементы на rows и установив выравнивание center для поперечной оси

fieldset li { 
  padding: 20px; 
  display: flex;
  flex-direction: row;
  align-items: center;
  border-bottom: 1px #ddd solid;  }

fieldset label {
  cursor: pointer;
  margin-left: 30px; }