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

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代码，对于水平线，您只需使用hr代码。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;