css – Foundation 5 – 均匀间隔的Top Bar导航项目

Zurb Foundation的顶栏非常实用.它非常适合作为站点/应用程序的主导航,并在较小的设备上折叠为适合移动设备的格式.

它的一个主要缺点是能够使用均匀间隔的导航物品制作顶栏全宽.有没有办法使顶栏全宽和导航项均匀分布？

例

如果顶栏有6个导航项(宽度不同的长度标题),我们使用默认宽度1000px的.rows(15px排水沟),6个导航项应该在970px顶栏上均匀分布.第一个和最后一个导航项应分别左右对齐.

随着屏幕尺寸的缩小,导航项目的宽度应缩小以保持均匀间距,直到$topbar-breakpoint导致顶栏折叠为移动格式.

要求

>解决方案应该是基于CSS的.
>解决方案应该匹配Foundation 5’s compatibility chart.即这意味着它需要支持IE9.
>在$topbar-breakpoint下面,顶栏应该正常工作.

这是一个已经加载了Foundation 5资源的jsFiddle.

解决方法

这是另一种解决方案.它基于flexBox,浏览器很长时间没有支持它,它仍然只是一个候选推荐： CSS Flexible Box Layout Module

jsFiddle

如果您提供了良好的后备,就像原始的Foundation CSS一样,它可以被使用.

更新

你也可以使用这个jQuery解决方案作为后备,因为我还没有找到任何flexBox的polyfill：http://jsfiddle.net/borglinm/x6jvS/14/

.top-bar-section > ul {
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    flex-direction: row;
}
.top-bar-section > ul > li {
    float: none;
    -webkit-flex: 1;
    -moz-flex: 1;
    flex: 1;
}
.top-bar-section > ul > li > a {
    white-space: Nowrap;
    text-overflow: ellipsis;
    text-align: center;
    overflow: hidden;
}