标签中间的单选按钮显示

Question

此html需要在标签左侧显示收音机图标，但它位于标签上方 Chrome（左图），firefox 45.0.1（右图）

我嵌套标签中的输入的原因是因为代码需要使标签可以点击＆＃34;单击标签也会激活单选按钮＆＃34;

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

.radio-label {
    float: left;
}

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

Answer 1

display:inline-block属性并不意味着你强迫元素出现在左边它只是意味着你想要单行元素。使用float left实际意味着左对齐元素

.radio-inline {
    float: left;
}

Answer 2

你只是试着，

.radio-inline {
 float: left;
}

Answer 3

我认为你必须将两个包装在一个div中，然后将一个项目左对齐，另一个项目在右边，即单选按钮向左，标签向右。 给外部div一个特定的宽度，给每个项目50％

Answer 4

你可以试试这个：

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