带可点击标签的水平广播组

Question

此代码预计将显示2个单选按钮组，其中＆＃34;组＆＃34;水平显示以及＃34;标题左侧的按钮＆＃34;但我得到了第一个效果，但现在我怎么能得到它，以便按钮图标位于相应标题的左侧？感谢

修改
我没有在html链中使用bootstrap。

＆＃13;

＆＃13;

.list-item {
    margin: 1em 1em;
}

＆＃13;

      <div class="list-item">
        {{> sub}}
      </div>

<template name="sub">
  <label>
    <input type="radio" name="mygroup" />
    My caption 1
  </label>
  <label>
    <input type="radio" name="mygroup" />
    My caption 2
  </label>
</template>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以将输入设置为position：absolute;并在标签上设置一个填充左边，它可以创造奇迹：）

编辑：您可能需要在标签上设置相对位置。

Answer 2

喜欢这样吗？

.list-item {
    margin: 1em 1em;
}

Vertical <br>

<div class="list-item">
  <label>
    <input type="radio" name="mygroup" /> My caption 1 
  </label>
</div>

<div class="list-item">
  <label>
    <input type="radio" name="mygroup" /> My caption 2 
  </label>
</div>

Horizontal <br>

<div class="list-item">
  <label>
    <input type="radio" name="mygroup" /> My caption 1 
  </label>
  <label>
    <input type="radio" name="mygroup" /> My caption 2 
  </label>
</div>