Foundation TopBar：居中位置标题

Question

我正在使用 Foundation's top-bar，我想将标题 "Home" 放在 top-bar 的中心，同时将 "Menu" 放在 "Menu" 的末尾右边。但是，我从我的代码中得到的是我的 "Home" 仍然留在左侧，而我的 "Menu" 在右侧。

我意识到，如果我取出 title-area（有 float: left），那么它将使我的 "Home" 居中，但它会将我的 "Menu" 推到 top-bar 下方但它仍然停留在右侧，看起来像这样。

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

谢谢！

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

Answer 1

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

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

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

如果有任何说明。能不能提供一下url，方便我帮你清理一下

Answer 2

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

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

Codeply Demo

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

Foundation TopBar：居中位置标题

Foundation TopBar: Position Title in Center

html

css

zurb-foundation