每个列表元素右侧的空格

Question

不确定为什么每个li的右边都有一个空格，就像你在鼠标上面看到的那样。显然不希望它在那里，也无法弄清楚如何摆脱它。任何帮助将不胜感激！

以下是代码：

HTML：

<header>
  <div class="nav-container">
    <nav class="nav-items" role="navigation">           
      <ul>
        <li><a href="#">list1</a></li>
        <li><a href="#">list2</a></li>
        <li><a href="#">list3</a></li>
      </ul>
    </nav>          
  </div>        
</header>

CSS：

header {
  position: fixed;
  top:0;
  background-color:#2C5463;
  height:2.3em;
  width: 100%;
  border-bottom-color: black;
  border-bottom-style: solid;
  }

header .nav-container {
  margin: 0 30px;
  height: 100%;
  display: block;
  padding: 0;
  }

.nav-items {
  float: left;
  margin: 0;
  height: 100%;
}

.nav-items ul {
  display: inline-block;
  margin: 0;
  height: 100%;
}

.nav-items ul li {
  display: inherit;
  border-left: 1px solid #c8c8c8;
  height: 100%;
  margin: 0;
}

.nav-items ul li a {
  display: inherit;
  text-decoration: none;
  color: #ffffff;  
  margin: 0 auto;
  padding-top: 8px;
  white-space: nowrap;
  height: 100%; /* Width and height of top-level nav items */
  width: 90px;
  text-align:center;
  vertical-align: middle;
}

.nav-items ul li:hover {
  background: #617F8A
}

http://jsfiddle.net/eF83x/

Answer 1

内联元素对空白区域敏感。删除空格，问题就消失了。

例如：

<ul>
    <li><a href="#">list1</a></li><li><a href="#">list2</a></li><li><a href="#">list3</a></li>
</ul>

<强> jsFiddle example

您可以逐字地删除列表项之间的空格，使用HTML注释（<!-- -->）占用空格，或者将它们向左浮动。

Answer 2

你还可以做的是让lis浮动并将它们显示为块。这将修复它而不会弄乱html代码。

.nav-items ul li {
float: left;
display: block;
border-left: 1px solid #c8c8c8;
height: 100%;
margin: 0;
}

jsFiddle example

Answer 3

只需要在css类中更改您的解决方案，

.nav-items ul 
{
    display: **inline-table**;
    margin: 0;
    height: 100%;
}

Demostration