水平居中的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. 子菜单(下拉列表)必须在悬停项目下方打开

我已经尝试了几个选项(显示设置为table-cell或inline-block,垂直对齐设置为中间)并环顾网页,但我找不到满足上述所有要求的解决方案.

有人试过这样做吗？

Answer 1

我无法解决你的问题，但我可以解释为什么 Zurb 基金会很难做到这一点。

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

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

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

• 可以使用子菜单进行模拟，a.button.dropdown但同样，它不会满足您的所有限制

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

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

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

2. 使用另一个提供此功能的框架，请查看这篇类似的文章 ，了解如何使用 bootstap 执行相同的操作

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

4. 编写自己的功能

这有助于解释为什么 Zurb Foundation 3/4 无法实现您想要做的事情。如果您解决了问题，那么如果您发回您的解决方案，那就太好了，因为似乎许多其他人都想做类似的事情。