如何消除菜单之间的差距

Question

我在wordpress和foundation中创建了这个页面。我想更改下面的菜单：

进入：

我的css覆盖基础的app.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>

*****我删除了填充：0 15px;行高：45px;来自.top-bar-section li ..它原来如下：

如何推送长菜单？

Answer 1

您也可以检查填充/边距。这可能是问题所在。或者行高。如果没有完整的源代码（问题区域的html和css），很难找到确切的问题。希望有所帮助！

Answer 2

<强> CSS

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

Answer 3

以下是我更新的CSS .top-bar-section li

{
    width:103px;
    /*word-wrap:break-word;*/
    white-space:word-wrap;
    border-bottom: solid 1px #BC9633;
    float:left;
    padding-top : 0; padding-bottom: 0; margin-bottom: 0; 
    margin-right:10px;
    height:35px;
    line-height:11px;
}

结果比以前更好，解决了我的问题。只是说关于FSPB看起来有点奇怪。只有当这些单词可以用来拉伸下面的线所占用的线时才会更好。如果有人知道该怎么做，请随意。谢谢。

Answer 4

没有基础方法可以实现这一目标。根据您的目标，您可以使用css定位或表格valign方法。 Here is a SO post描述了如何实现这两者。