Question

我有一个有序列表，里面有一些句子和一些无线电按钮。

我有预期的结果，但我看到一个奇怪的事情：单选按钮未对齐。我尝试复制该问题并make a simple html with only the relevant code。

这是我的结果的缩放图片（我把PS中的绿松石线条看得更好）：

enter image description here

这就是预期的结果： enter image description here

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

我尝试的代码：

<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 提醒我，水平错位是由字母列表中的字母（宽度不同）引起的。但我仍然怀疑为什么有些收音机也会垂直错位。最后，我认为这还需要另一个问题。如果任何用户发现同样的问题，我会将整个问题留在此处仅用于查询目的。

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

问题是第一行中的字母宽度可变（以前的那些字母）：

试试这个：

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

The Fiddle

Answer 3

尝试添加以下CSS：

input[type="radio"]{
    padding: 0px;
    margin: 0px;
}

看看你的JSFiddle。这样更好吗？

Answer 4

是的，你通过以下方式添加了较低的alpha：之前，为什么不只是设置li的样式而不是之前使用？

相同的radiobutton，相同的位置。他们为什么不对齐？

4 个答案: