Foundation TopBar：中心位置标题答案

【问题标题】：Foundation TopBar: Position Title in CenterFoundation TopBar：中心位置标题
【发布时间】：2015-06-05 15:49:32
【问题描述】：

我正在使用Foundation's top-bar，我想将标题“主页”放在顶部栏的中心，同时将“菜单”放在右侧的末尾。但是，我从代码中得到的是我的“主页”仍然留在左侧，而我的“菜单”在右侧。

我意识到，如果我取出 title-area（有浮动：左），那么它会将我的“主页”居中，但它会将我的“菜单”推到顶栏下方，但它仍然停留在右侧，看起来像this.

有谁知道如何将标题放在中间，同时将菜单保持在顶栏的右侧？

谢谢！

    <nav class="top-bar" data-topbar role="navigation">
     <ul class="title-area">
       <li class="name">
            <h1 id="top_bar_page_title">Home</h1>
       </li>
       <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
     </ul>
     <section class="top-bar-section">
     <!-- Right Nav Section -->
     <ul class="right">
       <li class="has-dropdown">
           <a href="#">Menu</a>
            <ul class="dropdown">
             <li><a href="#">First link in dropdown</a></li>
             <li class="active"><a href="#">Active link in dropdown</a></li>
           </ul>
         </li>
       </ul>
      </section>
    </nav>

#top_bar_page_title{
  color: $white;
    text-align: center;
}

【问题讨论】：

标签： html css zurb-foundation

【解决方案1】：

将以下 CSS 规则添加到现有代码中。设置宽度和边距：0 auto 将帮助菜单找到中心。

@media (min-width: 640px) {
  .top-bar .title-area {
    float: left;
    margin: 0 auto;
    width: calc(100% - 90px);
    position: unset;
  }
}

Codeply Demo

如果您不想要 calc()，请使用 85% 的宽度。

【讨论】：

如果宽度达到 818px W x 327px H 则不起作用。菜单下降到底部。

【解决方案2】：

如果您希望菜单保持在右侧。只要给宽度像

.title-area {
    float: left;
    width: 80%;
}

nav {
    background: #ff0000 none repeat scroll 0 0;
}

如果有任何澄清。你能提供网址，以便我可以更清楚你吗

【讨论】：