CODEWITHSUNDEEP
htmlformsradio-button
pwerth
pwerth

Reputation: 210

Radio buttons and text on same line

I am trying to put a bunch of radio buttons in a form. Each has a label, and all the way to the right of the label should be an X (hence the class:pull-right). For some reason, each time I add a new radio button, the X gets pulled more and more towards the center of the form. Here is the code; see link below for what it produces. Can someone please explain what is happening/how I can fix the alignments? Note: each successive X is shifting by an additional 8px, which happens to be the border-radius of the form; not sure if this is just a coincidence.

Edit: what I have tried: putting each set of input/label/p tags in its own row, and also span; neither worked. I have tried playing with the pull-right class but when I remove it, the X's actually get sent to the next line below.

<form style="border:2px black solid; border-radius: 8px; padding:5px;">

<input style="margin-left:5px;line-height:30px" id="labelA" type="radio" name="letter"   value="A" checked="true"></input>
<label for="labelA" style="font weight:normal">A</label>
<p class="pull-right" style="margin-right:5px;line-height:25px;">X</p>
<br>

<input style="margin-left:5px;line-height:30px" id="labelB" type="radio" name="letter" value="B" checked="true"></input>
<label for="labelB" style="font weight:normal">B</label>
<p class="pull-right" style="margin-right:5px;line-height:25px;">X</p>
<br>`

<input style="margin-left:5px;line-height:30px" id="labelC" type="radio" name="letter"   value="C" checked="true"></input>
<label for="labelC" style="font weight:normal">C</label>
<p class="pull-right" style="margin-right:5px;line-height:25px;">X</p>

</form>

Output: https://i.sstatic.net/vdwUX.jpg

Upvotes: 0

Views: 2788

Answers (1)

Austin
Austin

Reputation: 3080

Removed the styles just to show what I did in a simple manner.

Generally I would not recommend using pull-right/left as it's effects will occur down the ENTIRE HTML until you call something like div class="clear" />.

Just use float if possible.

JSFiddle Demo

HTML

<form style="border:2px black solid; border-radius: 8px;">
<input id="labelA" type="radio" name="letter" value="A" checked="true" />
<span>A</span>
<span class="x">X</span>
<br>

<input id="labelB" type="radio" name="letter" value="B" checked="true" />
<span>B</span>
<span class="x">X</span>
<br>

<input id="labelC" type="radio" name="letter"   value="C" checked="true" />
<span >C</span>
<span class="x">X</span>

</form>

CSS

.x {
    float:right
}

Some further advice, one thing I have learned is if I am having issues styling stuff and I am jamming styles on individual elements, I am most likely thinking wayyy to hard on it. Try to keep CSS simple. :)

Upvotes: 1

Related Questions