無法擺脫鏈接之間的空間

Question

我試圖做出一個簡單的響應式導航，但我似乎無法消除鏈接之間的空間。任何幫助將不勝感激。

這是我的代碼： CSS：

.nav{ 
 
\t width:100%; text-align:centre; margin:0 auto;max-width:1010px; 
 
} 
 
.nav ul{ 
 
\t line-height:50px; 
 
} 
 
.nav li{ 
 
\t display:inline; list-style-type: none;border-right:#333333 1px solid; 
 
} 
 
.nav li:hover{ 
 
\t 
 
} 
 
.nav a{ 
 
\t text-decoration:none; padding:10px; color:#000; font-family: sans-serif; 
 
} 
 
.nav a:hover{ 
 
\t color:#c00;background:#999999; 
 
}

HTML：

<div class="nav"><!-- nav --> 
     <span class="menu-button"></span> 
     <ul class="clearfix menu"> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">About Us</a></li> 
      <li><a href="#">Portfolio</a></li> 
      <li><a href="#">Contact</a></li> 
     </ul> 
</div><!--/nav--> 

Answer 1

我只是將你的css從顯示切換到了一點：inline to float：left代表li標籤。希望它有幫助，雖然float可能不是這裏最好的方法。

.nav li { 
display: inline; 
} 

到

.nav li { 
float: left; 
} 

http://codepen.io/anon/pen/OyVLOK

Answer 2

正如你的CSS there is padding defined 10px的。

.nav a{ 
text-decoration:none; padding:10px 5px; color:#000; font-family: sans-serif; 
} 

將其設置爲

.nav a{text-decoration:none; padding:10px 2px; color:#000; font-family: sans-serif;} 

希望這有助於你！

Answer 3

隨着CodeRomeos答案，大部分的間距/填充遭到移除，但是還是會有鏈接之間存在一些間隔。從您的請求消除鏈接之間的間距，然後下面的解決方案將完全刪除間距（雖然它會看起來更好的IMO至少有一些填充鏈接之間）。

.nav { 
 
    width: 100%; 
 
    text-align: centre; 
 
    margin: 0; 
 
    max-width: 1010px; 
 
} 
 
.nav ul { 
 
    line-height: 16px; 
 
} 
 
.nav li { 
 
    display: inline; 
 
    list-style-type: none; 
 
    border-right: #333333 1px solid; 
 
    margin: 0; 
 
    padding: 0; 
 
    float: left; 
 
} 
 
.nav a { 
 
    text-decoration: none; 
 
    color: #000; 
 
    font-family: sans-serif; 
 
    font-size: 16px; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.nav a:hover { 
 
    color: #c00; 
 
    background: #999999; 
 
}

<div class="nav"> 
 
    <span class="menu-button"></span> 
 
    <ul class="clearfix menu"> 
 
     <li> 
 
     <a href="#">Home</a> 
 
     </li> 
 
     <li> 
 
     <a href="#">About Us</a> 
 
     </li> 
 
     <li> 
 
     <a href="#">Portfolio</a> 
 
     </li> 
 
     <li> 
 
     <a href="#">Contact</a> 
 
     </li> 
 
    </ul> 
 
</div>