Font Awesome not filling menu

在我的菜单栏中，我有一个使用字体真棒的搜索图标。菜单栏中的每个项目都在填充它，但搜索的高度大约是其父项的80-85％。这是我的html代码Font Awesome not filling menu

<html> 
 

 
    <head> 
 
     <title>main page</title> 
 
     <link rel="stylesheet" href="styles.css"/> 
 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"/> 
 
<style> 
 
body 
 
{ 
 
    margin:0px; 
 
    padding:0px; 
 
} 
 

 
ul 
 
{ 
 
    margin:0px; 
 
    padding:0px; 
 
    background-color:#CC6666; 
 
    overflow:hidden; 
 
    list-style-type:none; 
 
    font-size:18; 
 
    font-weight:bold; 
 
} 
 

 
li{float:right;} 
 

 
li a 
 
{ 
 
    display:inline-block; 
 
    display:inline-block; 
 
     text-decoration:none; 
 
     color:white; 
 
     text-align:center; 
 
     padding:12px 16px; 
 
     font-weight:400; 
 
     padding-right:15px; 
 
    } 
 
    li a:hover, .dropdown:hover .dropbtn{ 
 
     background-color:#666666; 
 
     margin:0px; 
 

 
    } 
 
    .active{ 
 
     background-color:#666666; 
 
    } 
 
    
 
.search{ 
 
    float:left; 
 
} 
 
</style> 
 
    </head> 
 
<body> 
 
    <div class="posi"> 
 
    <ul> 
 
    <li><a class="active" herf="home">خانه</a></li> 
 

 
    <li> 
 
     <a href="#">سوالات متداول</a> 
 
    </li> 
 

 
    <li> 
 
     <a href="#">عضویت در سایت</a> 
 
    </li> 
 
    <li> 
 
    <a herf="#">معرفی</a></li> 
 
    <li class="search"><a href="#"><i class="fa fa-search"></i></a></li> 
 
</ul> 
 
    </div> 
 
</html>

This is what I get

我怎样才能解决这个问题？

来源

2017-02-14 Hanie Asemi

调整图标的字体大小，使其充满你的空间欲望（试试〜17px） – haxxxton

我没有得到你的要求。 – Bhawna

你想减小搜索图标的大小... – Prateek

您可以添加：

line-height: 1;

到

li a

来源

2017-02-14 07:42:42

谢谢。但是什么是行高？以及这是如何解决我的问题？ –

从MDN网站：在块级元素上，line-height属性指定元素内线框的最小高度。在你的情况下，fot-awesome正在使用该行高度，并且你的盒子不符合该高度。 –

我相信这是一个特定铬的错误，如Safari和Firefox似乎有不成为一个问题。如果其他人可以验证这一点或反驳这一点，请让我知道。我使用的Chrome版本56.0.2924.87（64位），反正 - 这里是一个具体的铬溶液

// jQuery to add css class "chrome-fix" which changes height of ".search a" to 24 px instead of 22 px 
 
if (navigator.appVersion.indexOf("Chrome/") != -1) { 
 
$(".search a").addClass(".chrome-fix"); 
 
}

body 
 
{ 
 
    margin:0px; 
 
    padding:0px; 
 
} 
 

 
ul 
 
{ 
 
    margin:0px; 
 
    padding:0px; 
 
    background-color:#CC6666; 
 
    overflow:hidden; 
 
    list-style-type:none; 
 
    font-size:18px; 
 
    font-weight:bold; 
 
} 
 

 
li{float:right;} 
 

 
li a 
 
{ 
 
    display:inline-block; 
 
    display:inline-block; 
 
     text-decoration:none; 
 
     color:white; 
 
     text-align:center; 
 
     padding:12px 16px; 
 
     font-weight:400; 
 
     padding-right:15px; 
 
    } 
 
    li a:hover, .dropdown:hover .dropbtn{ 
 
     background-color:#666666; 
 
     margin:0px; 
 

 
    } 
 
    .active{ 
 
     background-color:#666666; 
 
    } 
 
    
 
.search{ 
 
    float:left; 
 
    height:41px; 
 
} 
 
.chrome-fix { 
 
    height:24px; 
 
}

<html> 
 

 
    <head> 
 
     <title>main page</title> 
 
     <link rel="stylesheet" href="styles.css"/> 
 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"/> 
 

 
    </head> 
 
<body> 
 
    <div class="posi"> 
 
    <ul> 
 
    <li><a class="active" herf="home">خانه</a></li> 
 

 
    <li> 
 
     <a href="#">سوالات متداول</a> 
 
    </li> 
 

 
    <li> 
 
     <a href="#">عضویت در سایت</a> 
 
    </li> 
 
    <li> 
 
    <a herf="#">معرفی</a></li> 
 
    <li class="search"><a href="#" class="chrome-fix"><i class="fa fa-search"></i></a></li> 
 
</ul> 
 
    </div> 
 
</html>

来源

2017-02-14 08:00:07 Inkdot

谢谢你的帮助 –

Font Awesome not filling menu

回答

相关问题