我想在导航中为链接添加图标,我需要为它们使用不同的尺寸。但是当我使用不同的字体大小时,垂直对齐并不起作用。 为什么会发生这种情况?我该如何解决?
HTML
<nav id="top" class="menu">
<div class="container">
<div id="top-links" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"><a><i class="dif-size">! </i>text</a></li>
<li class="dropdown"><a>text</a></li>
<li class="dropdown"><a>text</a></li>
</ul>
</div>
</div>
CSS
.menu {
background-color:black;
color:#ffffff;
padding: 0 0 0 0;
position: relative;
width: 100%;
}
.menu li a {
display: inline-block;
vertical-align: bottom;
}
.dif-size {
font-size:30px;
}
.menu a:hover, a:focus{
background-color:rgba(20, 255, 20, .7) !important;
}
答案 0 :(得分:1)
答案 1 :(得分:0)
要解决此问题,您必须使用vertical-align
css property。
当你为font-size指定不同的值时,它们自然会在该空间中占据不同的像素值。如果它们全部在同一元素内对齐,它们看起来就像它们在不同的行中一样多次他们看起来很扭曲。
即:如果你有两个图标在同一个容器中对齐,并给出font-size:13px;到第一个元素和font-size:11px;对于第二个元素,最小的一个像素看起来不会因为它的高度缩短2px。在这种情况下,如果你给vertical-align:1px;对于第二个图标,它将看起来与第一个图标相关。
如果您使用的字体大小与字形的原始图纸尺寸不同且不成比例,则可以看到扭曲。
答案 2 :(得分:0)
添加line-height属性解决了这个问题。
.menu li a, .menu li i {
display: inline-block;
vertical-align: middle;
line-height: 25px;
}