删除不必要的利润率和用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; 

}