标签中间显示单选按钮答案

【问题标题】：radio button display in middle of label标签中间显示单选按钮
【发布时间】：2016-04-06 16:25:29
【问题描述】：

此 html 需要在标签左侧显示单选图标，但它在其上方。
Chrome（左图）、firefox 45.0.1（右图）

我将输入嵌套在标签中的原因是代码需要使标签可点击“点击标签也激活单选按钮”

如何让它在所有浏览器中正确显示？谢谢

.radio-label {
    float: left;
}

<label class="radio-label">
      <input type="radio" name={{group}} checked={{value}} value={{name}}>{{caption}}
    </label>

【问题讨论】：

可以分享截图吗
你能看到我在帖子中包含的图片吗？
试试 float: left ?对于单选按钮
如果将输入放在标签之外并使用 for 属性关联它们会怎样？它的行为相同，但可以正确渲染。没有更完整的代码清单（或理想情况下的示例）很难诊断

标签： html css

【解决方案1】：

你可以试试这个：

<label class="radio-label">
  <input type="radio" name={{group}} checked={{value}} value={{name}}>
  <div>{{caption}}</div>
</label>

还有这样的造型……

.radio-label {
    width: 200px; // you can modify this as per your needs...
}
.radio-label, .radio-label input {
    float: left;
}

.radio-label div {
    overflow: hidden;
}

【讨论】：

【解决方案2】：

display:inline-block 属性并不意味着您要强制元素位于左侧，它只是意味着您希望元素位于单行中。使用 float left 这实际上意味着左对齐元素

.radio-inline {
    float: left;
}

【讨论】：

抱歉，我没有意识到引导样式正在影响它，我不希望这样，所以我删除并编辑了这个问题。

【解决方案3】：

你试试看，

.radio-inline {
 float: left;
}

【讨论】：

【解决方案4】：

我认为您必须将两者都打包在一个 div 中，然后将一个项目向左对齐，另一个在右侧对齐，即单选按钮向左对齐，标签向右对齐。给外部 div 一个特定的宽度，并给每个项目 50%

【讨论】：

这不会使标签可单击以切换单选按钮，因此您必须单击按钮本身，这是我试图避免的。
所以你必须编写标签点击函数来检查收音机。