Question

我正在尝试为多行的大型段落设置单选按钮。

但是如何使单选按钮不出现在开始位置，而是如我在图像中提到的那样出现。

我可以用行将列表中的元素分隔开，但是单选按钮实际上位于元素的开头，就像文本中的普通字母一样。 enter image description here

这是我尝试用于列表项的代码

<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

Codepen demo

我将首先使用更有意义的标记，即使用<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; }

Answer 2

我相信fcalderan已经给出了最佳答案-他甚至给了您CSS。

只是重申他的观点。您可以使用label标签来标记您的输入。然后，您可以在标签内使用“ for”属性，如下所示：“ for =“ input-here-id-of-input-here””，将标签指向输入。这使标签可单击（您可以单击文本以及单击单选按钮）。另外，您可以分别定位输入的两个部分，即输入和标签（如fcalderan所做的那样）。

希望这会有所帮助，J。

如何设计多个段落的单选按钮？

2 个答案: