html - 相同的单选按钮，相同的位置。为什么他们错位了？

Question

我有一个有序列表，其中包含一些句子和一些单选按钮。

我得到了预期的结果，但我看到了一件奇怪的事情:单选按钮未对齐。我尝试重现问题和 make a simple html with only the relevant code .

这是我得到的结果的放大图片(我把绿松石线放在 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 列表中的字母(不同宽度)引起的。但我仍然怀疑为什么有些 radio 也垂直错位。最后，我认为这需要另一个问题。如果任何用户发现相同的问题，我将把整个问题留在这里仅供查询。

Answer 1

问题的发生是因为下面的 css 规则，并且因为使用的字体不是等宽的，因此 i)占用的空间少于 h) .

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

要解决此问题，您可以设置 <li>作为内联 block 并应用特定宽度。

.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与修复。