html - 单选按钮显示在标签中间

Question

此 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>

Answer 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;
}