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

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 有效问题是您只将单选按钮放在该标签内。所以它从屏幕右侧获取 margin 。关闭 label 之前的 label 标签和类单选，对于水平线，您可以简单地使用 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>