在菜單中匹配文字高度和圖像高度

Question

我有一個菜單，爲此我在最後放置了3張圖像，每張圖像尺寸爲30x30像素。在插入圖像之後，它在菜單底線和僅文本之間出現空格。對於圖像，菜單底部和圖像之間沒有空間。現在我想要做的是讓文本具有確切的大小（我設法通過增加字體大小來修復這個空間，但這不是我的解決方案），並且擺脫這個空間。再次，空間只在文字下方，而不是圖像。 *全屏檢查菜單。

#nav { 
 
    background-color: #e26a63; 
 
    padding: 0; 
 
    margin: 0; 
 
    font-family: FONT; 
 
    font-size: 20px; 
 
} 
 
    
 
#wrap { 
 
    padding-left: 60px; 
 
    height: 100px; 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    display: table-cell; 
 
    vertical-align: bottom; 
 

 
} 
 
#nav ul { 
 
    list-style-type: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    position: relative; 
 
    min-width: 245px; 
 
} 
 
#nav ul li { 
 
    display: inline-block; 
 
} 
 
#nav ul li:hover { 
 
    background-color: #cb5f59; 
 
} 
 

 
#nav ul li:after { 
 
    content: ""; 
 
    font-size: 0; 
 
    display: block; 
 
    height: 5px; 
 

 
} 
 
#nav ul li:hover:after { 
 
    background: #9e4a45; 
 
} 
 
#nav ul ul li:hover:after { 
 
    background: transparent; 
 
} 
 
#nav ul li a, visited { 
 
    color: white; 
 
    display: block; 
 
    padding: 15px; 
 
    text-decoration: none; 
 
} 
 
#nav ul li:hover ul { 
 
    display: block; 
 
} 
 
#nav ul ul { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #e26a63; 
 
    border-top: 0; 
 
    margin-top: 5px; 
 
     z-index: 100; 
 
} 
 
#nav ul ul li { 
 
    display: block; 
 
} 
 
#nav ul ul li a:hover { 
 
    color: white; 
 
} 
 
#nav { 
 
    display: table; 
 
    width: 100%; 
 
} 
 

 
.alignright { float: right; }

<div id="nav"> 
 
    <div id="wrap"> 
 
     <ul> 
 
     <li><a href="home.html">Home</a></li><li> 
 

 
     <a href="#">Study</a> 
 
      <ul> 
 
       <li><a href="Present.html">Present Simple</a></li><li> 
 
       <a href="Possessives.html">Possesives</a></li><li> 
 
       <a href="Articles.html">Articles</a></li><li> 
 
       <a href="Modal.html">Modal Verbs</a></li><li> 
 
       <a href="Prepositions.html">Prepositions</a></li><li>  
 
       <a href="Plural.html">Plural of nouns</a></li><li>  
 
       <a href="Countability.html">Countability</a></li>   
 
      </ul> 
 
      </li><li> 
 
     <a href="#">Games</a> 
 
      <ul> 
 
       <li><a href="#">Riddles</a></li><li> 
 
       <a href="#">Flip card game</a></li><li> 
 
       <a href="#">Spot the mistake</a></li><li> 
 
       <a href="#">Multiple choice</a></li>     
 
      </ul> 
 
      </li><li> 
 
     <a href="oferta.html">Shop</a></li><li> 
 
     <a href="contact.html">Contact</a></li><li> 
 
     <a href="about.html">About Us</a></li> 
 
     <li style="float:right"><a><img src="gmail.png" height="30px" width="30px"></a></li> <li style="float:right"><a><img src="twitter.png" height="30px" width="30px"></a></li><li style="float:right"><a><img src="facebook.png" height="30px" width="30px"></a></li> 
 
     </ul> 
 

 
    </div> 
 
</div>

Answer 1

最簡單的是設置在同一高度，你的文字，你有你的圖像

#nav ul li a, visited { 
    color: white; 
    display: block; 
    padding: 15px; 
    height: 30px;    /* added */ 
    text-decoration: none; 
} 

棧片斷

#nav { 
 
    background-color: #e26a63; 
 
    padding: 0; 
 
    margin: 0; 
 
    font-family: FONT; 
 
    font-size: 20px; 
 
} 
 
    
 
#wrap { 
 
    padding-left: 60px; 
 
    height: 100px; 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    display: table-cell; 
 
    vertical-align: bottom; 
 

 
} 
 
#nav ul { 
 
    list-style-type: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    position: relative; 
 
    min-width: 245px; 
 
} 
 
#nav ul li { 
 
    display: inline-block; 
 
} 
 
#nav ul li:hover { 
 
    background-color: #cb5f59; 
 
} 
 

 
#nav ul li:after { 
 
    content: ""; 
 
    font-size: 0; 
 
    display: block; 
 
    height: 5px; 
 

 
} 
 
#nav ul li:hover:after { 
 
    background: #9e4a45; 
 
} 
 
#nav ul ul li:hover:after { 
 
    background: transparent; 
 
} 
 
#nav ul li a, visited { 
 
    color: white; 
 
    display: block; 
 
    padding: 15px; 
 
    height: 30px;    /* added */ 
 
    text-decoration: none; 
 
} 
 
#nav ul li:hover ul { 
 
    display: block; 
 
} 
 
#nav ul ul { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #e26a63; 
 
    border-top: 0; 
 
    margin-top: 5px; 
 
     z-index: 100; 
 
} 
 
#nav ul ul li { 
 
    display: block; 
 
} 
 
#nav ul ul li a:hover { 
 
    color: white; 
 
} 
 
#nav { 
 
    display: table; 
 
    width: 100%; 
 
} 
 

 
.alignright { float: right; }

<div id="nav"> 
 
    <div id="wrap"> 
 
     <ul> 
 
     <li><a href="home.html">Home</a></li><li> 
 

 
     <a href="#">Study</a> 
 
      <ul> 
 
       <li><a href="Present.html">Present Simple</a></li><li> 
 
       <a href="Possessives.html">Possesives</a></li><li> 
 
       <a href="Articles.html">Articles</a></li><li> 
 
       <a href="Modal.html">Modal Verbs</a></li><li> 
 
       <a href="Prepositions.html">Prepositions</a></li><li>  
 
       <a href="Plural.html">Plural of nouns</a></li><li>  
 
       <a href="Countability.html">Countability</a></li>   
 
      </ul> 
 
      </li><li> 
 
     <a href="#">Games</a> 
 
      <ul> 
 
       <li><a href="#">Riddles</a></li><li> 
 
       <a href="#">Flip card game</a></li><li> 
 
       <a href="#">Spot the mistake</a></li><li> 
 
       <a href="#">Multiple choice</a></li>     
 
      </ul> 
 
      </li><li> 
 
     <a href="oferta.html">Shop</a></li><li> 
 
     <a href="contact.html">Contact</a></li><li> 
 
     <a href="about.html">About Us</a></li> 
 
     <li style="float:right"><a><img src="gmail.png" height="30px" width="30px"></a></li> <li style="float:right"><a><img src="twitter.png" height="30px" width="30px"></a></li><li style="float:right"><a><img src="facebook.png" height="30px" width="30px"></a></li> 
 
     </ul> 
 

 
    </div> 
 
</div>