0

有很多关于这个问题的帖子要求答案，大多数都对了一半或根本不起作用。

您可以使用示例导航栏并添加一些编辑，这些编辑将在下面的答案中。

4

2 回答 2

1

只需从此处复制并粘贴 Foundation 顶部栏示例。把它放在你的 HTML 中，

  1. 删除顶栏的​​左侧或右侧部分
  2. 删除左右两边<ul class="left">' or '<ul class="right">
  3. <h1><a href="#">Top Bar Title </a></h1>从标题部分删除。

  4. 添加

    .top-bar-section ul {display: table; margin: 0 auto;}

.top-bar-section ul li {display: table-cell;}

在 结束标签@media only screen and (min-width: 58.75em) { 之前。}

如果您选择左侧，现在应该留下 3 个按钮，并且它应该完全居中

于 2013-10-30T10:47:17.323 回答
0

这是我发现适用于所有调整大小事件的最佳解决方案。它将 Foundation 5 顶栏元素居中。

请注意，'contain-to-grid' div 类会将顶部导航栏的宽度保持在网站框架内，但实际上不会使导航元素居中。

下面的代码可以。

SCSS：

nav.top-bar:not(.expanded) {
            text-align: center;
            section.top-bar-section { display: inline-block; }
                           }

HTML：

<div class="contain-to-grid">
    <nav class="top-bar" data-topbar>
        <ul class="title-area">
            <li class="name">
                <h1><a href="#"></a></h1>
            </li>
            <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
            <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
        </ul>

        <section class="top-bar-section">
            <ul>
                <li><%= link_to 'LINK 1', root_path %></li>
                <li class="divider"></li>
                <li><%= link_to 'LINK2', link_path %></li>
                <li class="divider"></li>
                <li class="has-dropdown">
                    <%= link_to 'Dropping', "#" %>
                    <ul class="dropdown">
                        <li><label>Label:</label></li>
                        <li><%= link_to 'DROP 1', drop_path %></li>
                        <li class="divider"></li>
                        <li><%= link_to 'DROP 2', drop_path %></li>
                    </ul>
                </li>
            </ul>
        </section>
    </nav>
</div>
于 2014-06-16T03:37:53.587 回答