问

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

随便人呐发布于 2023-02-06 18:46

button

html

图片

sum

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

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

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

在此输入图像描述

这就是预期的结果: 在此输入图像描述

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

我试过的代码:



        
            chanante ipsum dolor sit amet, quis eveniet mangurrián                                 
            
                
                
                
            
        
        
            zanguango magna ex labore bufonesco gambitero           
            
                
                
                
            
        
        
            chotera nisi chavalada pepinoninoni ullamco nisi ullamco                                   
            
                
                
                
            
        
        
            aliqua tontiploster sed eveniet sed ex viejuno                                           
            
                
                
                
            
        
        
            cosica soooy crossoverr to sueltecico ad ex gaticos ullamco                                
            
                
                
                
            
        
                
                                             
            
                
                
                
            
        
        
            ea elit aliqua minim bizcoché pepinoninoni           
            
                
                
                
            
        
        
            nisi minim ayy qué gustico enim ullamco saepe minim labore, nisi fresquete, super ñoño eveniet cartoniano magna                                   
            
                
                
                
            
        
        
            adipisicing quis eres un pirámidee veniam                                           
            
                
                
                
            
        
        
            síberet traeros tol jamón

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

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.

2023-02-06 18:50 回答

手机用户2502909293

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签