内联单选按钮组的第一个标签和单选按钮之间的空间

Question

我需要在第一个标签和内联单选按钮组之间留出空格，如下图所示：

例如，我超重或肥胖与是，没有按钮等之间的空间，我需要在底部有一条水平线，如图所示。我尝试了以下方法：

<form class="j-forms" novalidate>
<div class="unit">
<div class="inline-group">
<label style="margin-right: 20px !important;">I'm overweight or obese
<label class="radio">
<input type="radio" name="i-radio">
<i></i>
Yes
</label>
<label class="radio">
<input type="radio" name="i-radio">
<i></i>
No
</label>
<label class="radio">
<input type="radio" name="i-radio">
<i></i>
Don't know
</label>
</label>
</div>
</div>
</form>

但是下面的 css 没有提供空间：

<label style="margin-right: 20px !important;">I'm overweight or obese

我也尝试了右填充，但没有任何效果。 如何添加空间、底部的水平线和图片中的多行按钮。

向 CSS 专家寻求帮助。

Answer 1

您的样式margin-right: 20px 有效，问题是您仅将单选按钮放在该标签内。所以它正在从屏幕的右侧获取边距。关闭label 之前的label 标记与类radio 和水平线，你可以简单地使用hr 标记。

<form class="j-forms" novalidate>
<div class="unit">
<div class="inline-group">
<label style="margin-right: 60px !important;">I'm overweight or obese</label>
<label class="radio">
<input type="radio" name="i-radio">
<i></i>
Yes
</label>
<label class="radio">
<input type="radio" name="i-radio">
<i></i>
No
</label>
<label class="radio">
<input type="radio" name="i-radio">
<i></i>
Don't know
</label>
<hr>
</div>
<div class="inline-group">
<label style="margin-right: 98px">I smoke cigarettes</label>
<label class="radio">
<input type="radio" name="i-radio">
<i></i>
Yes
</label>
<label class="radio">
<input type="radio" name="i-radio">
<i></i>
No
</label>
<label class="radio">
<input type="radio" name="i-radio">
<i></i>
Don't know
</label>
<hr>
</div>
</div>
</form>