引导复选框和标签在同一行

Question

我无法将复选框和标签放在同一行上。正确的引导方法是将复选框包装在标签标签中，如下所示 -

<li>           
<label><input type="radio">Joe made the sugar cookies; Susan decorated them.</label>
</li>

但是我使用的是 CMS，它不会以这种方式创建复选框和标签，而是像这样生成-

<li>
<input type="radio">
<label>She did her best to help him.</label>
</li>

这种方法的问题是复选框与标签位于不同的行上。我可以将标签设置为display: inline并且这有效，但它从我的表单中删除了所有边距并且看起来不太好。

任何人都可以帮我找到解决方案吗？这是一个js小提琴

Answer 1

你需要在 css 方面做更多的工作......刚刚为你创建了一个新的小提琴。这里是。

li > input {
  display:inline-block;
  width:20px;
}
label { margin-bottom: 25px;
  display:inline-block;
  width:235px;
}

Answer 2

使用 Bootstraps 的radio-inline类：

将contentand包裹radio input在labelwith class中radio-inline，然后您可以使用以下命令将其放在同一行上Bootstrap