无法摆脱链接之间的空间

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>