在单选按钮列表的标签内呈现输入类型单选

Posted 2023-03-06

【中文标题】在单选按钮列表的标签内呈现输入类型单选

【英文标题】：Render input type radio within label for a radiobuttonlist

【发布时间】：2014-09-29 08:18:35

【问题描述】：

<span><span>
        <input type="radio" value="1377">
        <label>
            Enig</label>
    </span><span>
        <input type="radio" value="1378" title="enig">
        <label>
            Delvist enig</label>
    </span><span>
        <input type="radio">
        <label>
            Hverkenenig eller uenig</label>
    </span><span>
        <input type="radio">
        <label>
            Delvist uenig</label>
    </span><span>
        <input type="radio"><label>
            Uenig</label>
</span></span>

使用 CSS3 需要将上面的 html 与标签内的输入一起渲染？

我试过了 BootStrapRadioButtonList 没有运气？

上面代码的问题是当浏览器大小改变时，输入单选按钮保持在顶部，而它的文本向下移动！我如何使用 css3 渲染标签内的输入？

【参考方案1】：

在 Bootstrap 中，您可以按如下方式格式化您的无线电控件：

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>