html - 如何使用 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}