CODEWITHSUNDEEP
csshtml
Pamela
Pamela

Reputation: 684

space between the first label and radio buttons for an inline radio button group

I need to have space between the first label and the inline radio button group as in the following image: image

Example, space between I'm overweight or obese and Yes, No buttons etc and i need to have a horizontal line at bottom as in image. I tried the following:

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

But the following css is not providing the space:

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

I tried right-padding too without any effect. How can i add space, the horizontal lines at bottom and multiple rows of buttons as in the image.

Soliciting help from CSS experts.

Upvotes: 0

Views: 2122

Answers (1)

Sanchit Patiyal
Sanchit Patiyal

Reputation: 4920

Your style margin-right: 20px is working the problem is you are putting the radio buttons inside that label only. So it is taking margin from the right side of the screen. Close the label tag before label with class radio and for the horizontal line, you can simply use hr tag.

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

Upvotes: 1

Related Questions