+-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--------------------------------------------------------------------------+ | | | | ˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜
这意味着：
>项目具有固定宽度
>项目可能有一行或多行(通常不超过3行),但它们必须始终垂直居中.
>所有项目高度必须与最高项目相同
>子菜单(下拉列表)必须在悬停项目下方打开
我已经尝试了几个选项(显示设置为table-cell或inline-block,垂直对齐设置为中间)并环顾网络,但我找不到满足上述所有要求的解决方案.
有人试过这样做吗？
解决方法
>按钮的实现方式(并在顶部栏中重复使用)
Zurb Foundation有css显示：内联块设置.这意味着
您不能使用垂直对齐文本
vertical-align：middle这使得无法自动进行
使用多行文本对齐按钮.
>顶杆不是设计为具有均匀间隔的元件.您可以
使用ul.button-group.event-6来更接近您想要的布局,
但它不适用于所有约束.它旨在
有一个logo,一个左菜单和一个右菜单.
>设置高度很容易,可以通过应用在css中完成
高度：例如80px到每个按钮.然而
多行文字对齐将在顶部.
>可以使用a.button.dropdown模拟子菜单,但是再次,它
不会满足你所有的限制
>基础中的topbar功能主要包含在a中
在foundation.topbar.js文件中的jQuery插件.这需要
很多修改工作的方式你想象和愿意
使你的topbar可能与以后的版本不兼容
基础.
在尝试使用特定框架实现所需设计时,您有以下几种选择：
>重新调整您的目标以适应框架的范围(即
减少约束数量或稍微改变设计
适应基金会的局限性)
>使用另一个提供此功能的框架,请查看
这个similar
post
关于使用bootstap做同样的事情
>寻找另一个库来完成所需的功能(in
你的情况可能看看jQuery Mobile
Navbars
>编写自己的功能
我这有助于解释一些原因,为什么你要做的事情不可能与Zurb Foundation 3/4.如果您解决了这个问题,那么如果您回复您的解决方案会很好,因为似乎很多其他人想要做类似的事情.
