html - <li> 有 2 个元素没有正确对齐，为什么？

Question

您好，我正在努力将我的数字与我不想对齐的图片对齐。这是一个列表，每一行都有一个图像和一个数字。

.category_icon           { height:100px; width:300px; position:absolute; left:350px; top:150px;
        ul                   { list-style:none; height:70px; width:220px; 
            li               { display: inline; margin-right: 4px; width:65px; height:90px;
                img          { width:65px; height:64px;}
                span         { font-family:Tahoma; font-weight:bold; font-size:12px; position:absolute; bottom:7px; width:64px; }
            }
        }
    }



<div class="category_icon">
<ul>
    <li><img src="<%=atm.buttonPath%>/family_category_btn.png" alt="" /><span>346</span></li>
    <li><img src="<%=atm.buttonPath%>/camping_category_btn.png" alt="" /><span>12</span></li>
    <li><img src="<%=atm.buttonPath%>/cooking_category_btn.png" alt="" /><span>546</span></li>
</ul>

如果有人能帮助我，谢谢。

Answer 1

solution with text below
solution with centralised text below

对于图像，在开始使用它们之前，您总是必须更改它们的 diplay 属性....在此处添加相同的内容并将 li 添加到 display :内联 block ；这会有所帮助

要做的事:

li {
    display: inline-block; /*changed */
    margin-right: 4px;
    width:65px;
    height:90px;
    text-align:center;
}
img {
    display:block; /*added */
    width:65px;
    height:64px;
}

附言:我不知道 LESS...所以给了你一个通用的解决方案