如何使用Foundation框架减少菜单项的宽度

Question

我一直在使用Foundation框架创建一个菜单，但是我注意到每个菜单项都有一个很大的宽度（主页选项卡，这就是我将鼠标悬停在它上面时的样子）：

有没有减少这个间距？我尝试过使用填充，但无济于事。我应该更改Foundation的CSS文件中的某些内容吗？ （我对SASS很满意。）

这就是我所拥有的：

<nav class="top-bar">
                    <section class="top-bar-section">
                        <ul>
                            <li><a href="#">home</a></li>
                            <li><a href="#">about</a></li>
                            <li><a href="#">volunteer</a></li>
                        </ul>
                    </section>
                </nav>

CSS：

.top-bar {
     height: 125px;
     font-family: ProximaNova;
     font-size: 16px;
     background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(white), to(#f0f0f0));
     background-image: -webkit-linear-gradient(top, white, #f0f0f0);
     background-image: -moz-linear-gradient(top, white, #f0f0f0);
     background-image: -ms-linear-gradient(top, white, #f0f0f0);
     background-image: -o-linear-gradient(top, white, #f0f0f0);
}
.top-bar ul li a {
     padding-left: 0px;
     padding-right: 0px;
}

以下是网站：http://mvcsf.com/new/ 谢谢！

Answer 1

您只需要减少填充。例如：

@media only screen and (min-width: 940px)
.top-bar-section li a:not(.button) {
padding: 0px 7px;
line-height: 125px;
background: url("../img/headerbackground.png") repeat-x;

或者添加：

.top-bar-section ul li a {padding:0px 3px !important}