css - 如何消除菜单之间的差距

Question

我在 wordpress 和 foundation 中制作了这个页面。我想更改以下菜单:

进入这个:

我的覆盖基础的 app.css 的 css 如下:

.top-bar-section li
{
    width:150px;
    word-wrap:break-word;
    border-bottom: solid 1px #BC9633;
    float:left;
}

app.css 的一部分

.top-bar-section li:not(.has-form) a:not(.button) {padding:0 15px;line-height:45px;background:#ffffff;}.top-bar-section li:not(.has-form) a:not(.button):hover {border-bottom: 1px solid #BC9633;padding-bottom: 1px;padding-bottom: 3px;border-bottom-width: 1px;border-bottom-style: solid;}.top-bar-section li.active:not(.has-form) a:not(.button) {padding:0 15px;line-height:45px;color:#000000;border-bottom: 1px solid #BC9633;padding-bottom: 1px;padding-bottom: 3px;border-bottom-width: 1px;border-bottom-style: solid;}.top-bar-section li.active:not(.has-form) a:not(.button):hover {background:#BC96633;color:#000000;}

HTML

<div class="menu-wrapper">
    <div class="top-bar-container contain-to-grid show-for-medium-up">
    <nav class="top-bar" data-topbar role="navigation">
        <ul class="title-area">
            <li class="name">
                <!--<h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1>-->
               <a href="<?php echo home_url(); ?>"><img src="img/fspb_logo.png" width="165" height="145" ></a>
            </li>

        </ul>
        <section class="top-bar-section" style="padding-top:55px;">

//下面两行显示菜单

        <?php foundationPress_top_bar_l(); ?>
        <?php foundationPress_top_bar_r(); ?>


        </section>

    </nav>



</div>
</div>

***** 我删除了 padding:0 15px;line-height:45px;来自 .top-bar-section li.. 结果如下:

请问如何将长菜单向上推？

Answer 1

您还可以检查 上的填充/边距。那可能就是问题所在。或者行高。如果没有完整的源代码(问题区域的 html 和 css)，很难查明确切的问题。希望对您有所帮助!