I have a ordered list that have some sentences and some radiobuttons.
I have the expected result, but I see a weird thing: the radio buttons are misaligned. I try to replicate the issue and make a simple html with only the relevant code.
That's a zoomed picture of the result I have (I put the turquoise lines in PS to see better the effect):
And that's the expected result:
As you can see in the first zoomed picture, the radio buttons are misaligned. Why this behaviour? How can I fix this?
The code I have tried:
<div class="test">
<ol class="test_inner">
<li>
<div>chanante ipsum dolor sit amet, quis eveniet mangurrián</div>
<div>
<input type="radio" name="myRadio2"/>
<input type="radio" name="myRadio2"/>
<input type="radio" name="myRadio2" checked="checked"/>
</div>
</li>
<li>
<div>zanguango magna ex labore bufonesco gambitero</div>
<div>
<input type="radio" name="myRadio3"/>
<input type="radio" name="myRadio3" checked="checked"/>
<input type="radio" name="myRadio3"/>
</div>
</li>
<li>
<div>chotera nisi chavalada pepinoninoni ullamco nisi ullamco</div>
<div>
<input type="radio" name="myRadio4" checked="checked"/>
<input type="radio" name="myRadio4"/>
<input type="radio" name="myRadio4"/>
</div>
</li>
<li>
<div>aliqua tontiploster sed eveniet sed ex viejuno</div>
<div>
<input type="radio" name="myRadio5"/>
<input type="radio" name="myRadio5" checked="checked"/>
<input type="radio" name="myRadio5"/>
</div>
</li>
<li>
<div>cosica soooy crossoverr to sueltecico ad ex gaticos ullamco</div>
<div>
<input type="radio" name="myRadio6"/>
<input type="radio" name="myRadio6"/>
<input type="radio" name="myRadio6" checked="checked"/>
</div>
</li>
<li>
<div></div>
<div>
<input type="radio" name="myRadio7"/>
<input type="radio" name="myRadio7"/>
<input type="radio" name="myRadio7" checked="checked"/>
</div>
</li>
<li>
<div>ea elit aliqua minim bizcoché pepinoninoni</div>
<div>
<input type="radio" name="myRadio8"/>
<input type="radio" name="myRadio8" checked="checked"/>
<input type="radio" name="myRadio8"/>
</div>
</li>
<li>
<div>nisi minim ayy qué gustico enim ullamco saepe minim labore, nisi fresquete, super ñoño eveniet cartoniano magna</div>
<div>
<input type="radio" name="myRadio9" checked="checked"/>
<input type="radio" name="myRadio9"/>
<input type="radio" name="myRadio9"/>
</div>
</li>
<li>
<div>adipisicing quis eres un pirámidee veniam</div>
<div>
<input type="radio" name="myRadio0"/>
<input type="radio" name="myRadio0" checked="checked"/>
<input type="radio" name="myRadio0"/>
</div>
</li>
<li>
<div>síberet traeros tol jamón</div>
<div>
<input type="radio" name="myRadio1"/>
<input type="radio" name="myRadio1"/>
<input type="radio" name="myRadio1" checked="checked"/>
</div>
</li>
</ol>
</div>
The css I have:
.test ol.test_inner {list-style:none; counter-reset:list; font-size:90%;}
.test ol.test_inner li {padding:.3em 0 .3em .5em; background:gray;}
.test ol.test_inner:before {content:"1 2 3"; text-align:right; display:block; font-size:110%; font-weight:bold; letter-spacing:0.6em;}
.test ol.test_inner li:nth-of-type(odd) {background:pink;}
.test ol.test_inner li:before {counter-increment:list; content:counter(list, lower-alpha) ") "; color:#cbaa0e; padding-right:.5em; font-weight:bold;}
.test ol.test_inner li div {position:relative; display:inline-block; width:15%; text-align:right; vertical-align:middle}
.test ol.test_inner li div:first-child {width:80%; text-align:left;}
.test ol.test_inner li div input[type="radio"] {opacity:1; height:1.6em; width:1.6em; cursor:pointer; margin:0;}
For more details, I see the bad aligment in all browsers.
EDIT: As Goombah and codingstill alerts me, the horizontal misaligment is caused by the letters in the alpha list (different widths). But I still have the doubt why some radios are vertically misaligned too. Finally, I think this need another question. I'll leave the whole question here only for inquiry purposes if any user finds the same problem.