刪除不必要的利潤率和用CSS調整高度

Question

有跡象表明，我試圖修復，但無法找到一個解決方案

第一個是，李場之間的空間比的方式更廣泛的兩個問題2px比它應該是。我如何刪除它？

而其他的是，一個字段只有文本高，雖然字段高度定義爲50px。

我也有從GitHub啓用normalize.css文件。

有什麼建議嗎？

HTML

<nav class="nav-box"> 
    <div class="row"> 
     <ul class="main-nav"> 
      <li><a href="#">YES</a></li> 
      <li><a href="#">NO</a></li> 
     </ul> 
    </div> 
</nav> 

CSS

.row { 
    max-width: 1140px; 
    margin: 0 auto; 
} 
.nav-box { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    box-shadow: 0 2px 2px #f2f2f2; 
    min-height: 65px; 
} 
.main-nav { 
    float: right; 
    margin-top: 7px; 
} 
.main-nav li { 
    list-style: none; 
    display: inline-block; 
    font-size: 100%; 
} 
.main-nav li a { 
    height: 50px; 
    background-color: #ee4723; 
    padding: 0 18px 0 18px; 
    font-size: 1.4rem; 
    color: #fff; 
    font-family:'Oswald', sans-serif; 
    border:solid #fff; 
    border-width: 0 1px 1px 0; 
    line-height: 54px; 
} 

這裏有一個fiddle。

Answer 1

對於間距問題

這與inline-block元件（顯示兩個這樣的元件之間的額外的間距）的問題。解決此問題的一種方法是給出父元素（在此例中爲<ul>）font-size爲0，然後明確設置<li>元素的font-size。還有其他方式，如負利潤率，但我發現font-size: 0方法是最方便的。 你可以閱讀這裏https://css-tricks.com/fighting-the-space-between-inline-block-elements/

對於身高問題

其他方法雖然你已經給inline-block屬性設置爲<li>元素，孩子<a>元素仍然在線。屬性（如height和width）對內聯元素不起作用。添加display: inline-block到<a>元素以及對預期的效果

Answer 2

可以使用負邊距：

.main-nav li { 

    margin: 0 -2px; 

} 
.main-nav li a { 

    display: inline-block; 

}