无法摆脱链接之间的空格

Question

我正在尝试制作一个简单的响应式导航，但我似乎无法消除链接之间的空格。任何帮助将不胜感激。

这是我的代码： css:

.nav{
 width:100%; text-align:centre; margin:0 auto;max-width:1010px;
}
.nav ul{
 line-height:50px;
}
.nav li{
 display:inline; list-style-type: none;border-right:#333333 1px solid;
}
.nav li:hover{
 
}
.nav a{
 text-decoration:none; padding:10px; color:#000; font-family: sans-serif;
}
.nav a:hover{
 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 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 2

我刚刚将您的 css 从 display: inline 切换为 float: left for the li 标签。希望它能有所帮助，尽管浮动可能不是这里最好的方法。

.nav li {
display: inline;
}

到

.nav li {
float: left;
}

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

Answer 3

对于 CodeRomeos 的回答，大部分 spacing/padding 已被删除，但链接之间仍有一些间距。根据您的要求 eliminate 链接之间的间距然后下面的解决方案将完全删除间距（尽管它看起来会更好 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>

无法摆脱链接之间的空格

can't get rid of the spaces between the links

html

css

navigation

menu