相同的radiobutton,相同的位置.他们为什么不对齐？

Question

我有一个有序列表,有一些句子和一些radiobuttons.

我有预期的结果,但我看到一个奇怪的事情:单选按钮未对齐.我尝试复制问题并使用相关代码制作一个简单的html.

这是我的结果的缩放图片(我把PS中的绿松石线条看得更好):

这就是预期的结果:

正如您在第一张缩放图片中看到的那样,单选按钮未对齐.为什么会这样？我怎样才能解决这个问题？

我试过的代码:

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

我有的CSS:

.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;}

有关详细信息,我在所有浏览器中都看到了错误的对齐方式.

编辑:由于Goombah和codingstill警告我,水平误差是由alpha列表中的字母(不同的宽度)引起的.但我仍然怀疑为什么有些收音机也会垂直错位.最后,我认为这还需要另一个问题.如果任何用户发现同样的问题,我会将整个问题留在此处仅用于查询目的.

Answer 1

出现此问题是因为下面的css规则,并且因为使用的字体不是等宽的,因此i)占用的空间比h).

.test ol.test_inner li:before {
    content: counter(list, lower-alpha) ") ";
}

要解决此问题,您可以设置<li>为内嵌块并应用特定宽度.

.test ol.test_inner li:before {
    color: #CBAA0E;
    content: counter(list, lower-alpha) ") ";
    counter-increment: list;
    display: inline-block;
    font-weight: bold;
    padding-right: 0.5em;
    width: 20px;
}

这是一个修复的jsfiddle.

Answer 2

问题是您第一行中的字母宽度可变（您的 :before 中的字母）。

尝试这个：

CSS

.test ol.test_inner li:before {
    counter-increment:list; 
    content:counter(list, lower-alpha) ") "; 
    color:#cbaa0e; 
    padding-right:.5em; 
    font-weight:bold; display: 
    inline-block; 
    width: 15px;
}

小提琴