HTML <small>标签如何影响CSS line-height属性？

div { height: 45px; line-height: 45px; background-color: #b6ff00; } li { line-height: 45px; list-style: none; float: left; } li > a { width: 200px; line-height: inherit; display: block; text-decoration: none; background-color: #ff6a00; } li:first-child > a { background-color: #00ffff; }

另一种解决方案是改变display:block;到display:flex;为<a>标签。

div { 
 
    height: 45px; 
 
    line-height: 45px; 
 
    background-color: #b6ff00; 
 
} 
 
li { 
 
    line-height: 45px; 
 
    list-style: none; 
 
    float: left; 
 
} 
 
li > a { 
 
    width: 200px; 
 
    line-height: inherit; 
 
    /* REMOVED */ 
 
    /*display: block;*/ 
 
    display: flex; /* added*/ 
 
    text-decoration: none; 
 
    background-color: #ff6a00; 
 

 
} 
 
li:first-child > a { 
 
    background-color: #00ffff; 
 
}

<div> 
 
    <ul> 
 
    <li> 
 
     <a href="#">dfdd</a> 
 
    </li> 
 
    <li> 
 
     <a href="#"><small>sdaf</small>abc</a> 
 
    </li> 
 
    </ul> 
 
</div>

来源

2014-12-07 08:03:22 vinrav

我完全同意@Alochi。半导致是罪魁祸首。 Read this了解更多关于半领先以及如何计算。

解决此问题的方法是将height:45px;添加到您的<a>标记中。

div { 
 
    height: 45px; 
 
    line-height: 45px; 
 
    background-color: #b6ff00; 
 
} 
 
li { 
 
    line-height: 45px; 
 
    list-style: none; 
 
    float: left; 
 
} 
 
li > a { 
 
    width: 200px; 
 
    line-height: inherit; 
 
    display: block; 
 
    text-decoration: none; 
 
    background-color: #ff6a00; 
 
    height:45px; /* ADDED*/ 
 
    
 
} 
 
li:first-child > a { 
 
    background-color: #00ffff; 
 
}

<div> 
 
    <ul> 
 
    <li> 
 
     <a href="#">AAAA</a> 
 
    </li> 
 
    <li> 
 
     <a href="#"><small>AAAA</small>AAA</a> 
 
    </li> 
 
    </ul> 
 
</div>

来源

2014-12-07 07:44:33 vinrav

由于半领先''文本的是1px的较大，从所述支柱的顶部的半领先它共享与线支柱的，所以距离到文本的内联框的底部比其各自的线高度大1px。 – Alohci 2014-12-07 02:56:01

我[在我的浏览器中没有看到这种情况]（http://i.stack.imgur.com/VbNc4.png）。两个LI元素的高度都是45px。您能否提供浏览器信息，并可能包含一个显示问题中显示46像素高度的屏幕截图？ – 2014-12-07 02:56:15

你可以用'vertical-align：top'或'vertical-align：bottom'来修复它。 – Oriol 2014-12-07 02:56:44

HTML <small>标签如何影响CSS line-height属性？

回答

相关问题