造型完全悬停效果

Question

我想要一个css悬停效果在特定列表项的所有部分上持续，但似乎在列表项的底部和左侧和右侧添加了边距，我似乎无法摆脱它。我知道这可能是一个非常基本的CSS问题，但我在这里有一个JSFiddle：http://jsfiddle.net/y2497/

我使用bootstrap来获取我的基础css，但我认为这不会影响它。

我的代码是：

#navbar {
    padding-bottom: 0px;
    margin-bottom: 0px; 
}

#nav_container li {
    list-style-type: none;
    display: inline-block;
    margin: 0px 20px 0px 20px;
}

#nav_container li:hover {
    background: #333;   
}

#nav_container li a {
    display: inline-block;
    color: #00;
    padding: 10px;
}

<nav id="navbar" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
 <div id="nav_container"> 
    <ul>
      <li><a href="#top">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </div>
</nav>

Answer 1

您在li标签上使用内联块。你需要做的是应用float：left;和显示：块; 。然后对UL应用clearfix。内联块处理与文本处理方式类似的元素，包括行高和空格。