css - Foundation 5 - 均匀间隔的顶部栏导航项

Question

Zurb Foundation 的 top-bar 非常有用。它非常适合用作网站/应用的主导航，并在较小的设备上折叠成适合移动设备的格式。

它的一个主要缺点是能够使 top-bar 具有均匀间隔的导航项全宽。有没有办法让 top-bar 全宽并且导航项均匀分布？

示例

如果 top-bar 有 6 个导航项(宽度可变长度的标题)并且我们使用默认宽度 1000px 用于 .row(有 15px 间距) 6 个导航项应在 970 像素的 top-bar 中均匀分布。第一个和最后一个导航项应分别左对齐和右对齐。

随着屏幕尺寸的减小，导航项的宽度应该缩小以保持它们的均匀间距，直到 $topbar-breakpoint 导致 top-bar 折叠到移动设备上格式。

要求

• 解决方案应该基于 CSS。
• 解决方案应匹配 Foundation 5's compatibility chart .即这意味着它需要支持 IE9+。
• 在 $topbar-breakpoint 下，top-bar 应该正常工作。

这是一个 jsFiddle已加载 Foundation 5 资源。

Answer 1

这是另一种解决方案。它基于 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;
}