css - 水平居中 zurb 基础顶部栏菜单，多行项目垂直居中

Question

使用 Foundation，我正在尝试调整顶栏菜单，以使菜单项看起来像这样：

+-Parent container------------------------------------------------------------------+
|                                                                                   |
+-.top-bar--------------------------------------------------------------------------+
|              +-top-bar-section-+--------+--------+--------+--------+              |
|              |  Item  |  Item  |  Item  |  Item  |  Item  |  Item  |              |
|              |  menu  |  menu  |  menu  |  menu  |  menu  |  menu  |              |
|              |   01   |   02   |   03   |   04   |   05   |   06   |              |
|              +-top-bar-section-+--------+--------+--------+--------+              |
+-.top-bar--------------------------------------------------------------------------+
|                                                                                   |
|                                                                                   |
˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜

这意味着：

1. 项目具有固定宽度
2. 项目可能有一行或多行（通常不超过 3 行），但它们必须始终垂直居中。
3. 所有项目高度必须与最高项目相同
4. 子菜单（下拉菜单）必须在悬停项目下方打开

我尝试了几个选项（显示设置为表格单元格或内联块，垂直对齐设置为中间）并查看了网络，但我找不到满足上述所有要求的解决方案。

有人试过这样做吗？

Answer 1

我无法解决您的问题，但我可以解释为什么使用 Zurb Foundation 很难。

• 在 Zurb Foundation 中实现按钮（并在顶部栏中重用）的方式具有 cssdisplay:inline-block集。这意味着您不能使用垂直对齐文本 vertical-align:middle这使得无法自动将按钮与多行文本对齐。

• 顶栏并非设计为具有均匀间隔的元素。您可以使用 aul.button-group.event-6来接近您想要的布局，但它不适用于您的所有约束。它被设计成有一个Logo、一个左菜单和一个右菜单。

• 设置高度很容易，可以通过 height:80px例如应用到每个按钮在 css 中完成。但是，多行文本对齐将在顶部。

• 子菜单可以模拟，a.button.dropdown但同样，它不会满足您的所有约束

• Foundation 中的 topbar 功能主要包含在foundation.topbar.js文件中的 jQuery 插件中。这将需要进行大量修改才能以您设想的方式工作，并且会使您的顶栏可能与 Foundation 的未来和过去版本不兼容。

在尝试让您想要的设计与特定框架一起使用时，您有几个选择：

1. 重新调整您的目标以适应框架的范围（即减少您的约束数量或稍微更改设计以适应 Foundation 的限制）

2. 使用另一个提供此功能的框架，查看这篇 关于使用 bootstap 做同样事情的类似帖子

3. 寻找另一个库来完成所需的功能（在你的情况下，也许看看jQuery Mobile Navbars

4. 编写自己的功能

我这有助于解释为什么 Zurb Foundation 3/4 无法实现您尝试做的事情的一些原因。如果您解决了这个问题，最好将您的解决方案发回，因为似乎许多其他人也想做类似的事情。

Answer 2

这是如何做到的：

将此添加到您的 CSS 中：

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

通过将它放在 Foundation CSS 之后，确保它会覆盖 Foundations CSS。

在 HTML 中，我删除了leftorright类。

以上可以破解手机版。要修复此 CSS，请将此 CSS 放置在上述 CSS 下方：

@media only screen and (max-width: 58.75em) { /* TopBar Breakpoint */
.top-bar-section ul {display: inline; margin: 0;}
}

此外，这些类可能会根据 Foundation 的版本而改变，要求您修改上面使用的 CSS 类。

Answer 3

如果我很好地理解了这个问题，我会看到很多回答者解释说他需要更改 css。

他还可以使用 Foundation 类：contain-to-grid

<div class="contain-to-grid">
  <nav class="top-bar" data-topbar>
    ...
  </nav>
</div>

实时示例：http: //jsfiddle.net/gRtrX/37/（放大以查看结果）

真的很像

+-Parent container------------------------------------------------------------------+
|                                                                                   |
+-.top-bar--------------------------------------------------------------------------+
|              +-top-bar-section-+--------+--------+--------+--------+              |
|              |  Item  |  Item  |  Item  |  Item  |  Item  |  Item  |              |
|              |  menu  |  menu  |  menu  |  menu  |  menu  |  menu  |              |
|              |   01   |   02   |   03   |   04   |   05   |   06   |              |
|              +-top-bar-section-+--------+--------+--------+--------+              |
+-.top-bar--------------------------------------------------------------------------+
|                                                                                   |
|                                                                                   |
˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜

Answer 4

这是我发现适用于所有调整大小事件的最佳解决方案。它将 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>