Html 如何使用基础框架减少菜单项的宽度 我已经使用基础框架创建了一个菜单，但是我注意到每个菜单项都有一个大的宽度（Home选项卡，这就是我在它上面盘旋时的样子）：

是否有任何方法可以减少此间距？我试过用填充物，但没用。我是否应该更改基金会CSS文件中的某些内容？（我很喜欢说脏话）

以下是我所拥有的：

<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>

以下是网站：

---

谢谢大家!

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

@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}

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