我需要在第一个标签和内联单选按钮组之间留出空格,如下图所示:
例如,我超重或肥胖和是的,没有按钮等之间的空间,我需要在底部有一条水平线,如图所示。我尝试了以下方法:
<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 专家寻求帮助。
最佳答案
您的样式 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>
关于css - 内联单选按钮组的第一个标签和单选按钮之间的空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47779150/