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

回答

相關問題