css - 使用 jQuery 选择按钮时顶部和底部的间隙

Question

我试图在使用 jQuery 将鼠标悬停在按钮上后更改按钮的背景颜色。然而，每次我尝试时，我似乎在每个按钮的顶部和底部都有一个间隙，而不是整个按钮。这是我的 jsFiddle:http://jsfiddle.net/Z5M2a/

HTML:

<div id="side-bar"> 
                <ul class="side-nav">
                  <li class="divider"></li>
                  <li class="menuOption"><a href="#">Link 1</a></li>
                  <li class="divider"></li>
                  <li class="menuOption"><a href="#">Link 2</a></li>
                  <li class="divider"></li>
                  <li class="menuOption"><a href="#">Link 3</a></li>
                  <li class="divider"></li>
                  <li class="menuOption"><a href="#">Link 4</a></li>
                  <li class="divider"></li>
                </ul>   
           </div>

CSS:

div#side-bar {
    float: left;
    width: 187px;
    height: 100%;
    min-height: 300px;
    text-align: center;
    background-color: #e9e9e9;
}
.side-nav {
    padding-top: 0px;
}
.menuOption {
    width: 187px;
    height: 25px;
    line-height: 25px;
}
div#side-bar ul li a {
    color: #000;
    text-decoration: none;
}

Answer 1

您需要为您重新设置边距值。目前基金会为他们提供了 0.4375em 的 margin-bottom。

在你的 CSS 中添加这样的东西:

.side-bar li {
  margin-bottom:0:
}

更新:

工作链接在这里:

http://codepen.io/alexbaulch/pen/wKFvf