基础5 - 均匀间隔的顶栏导航项目

Question

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

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

例

如果top-bar有6个导航项目(宽度变化的长度标题)并且我们使用.rows 的默认宽度1000px (具有15px排水沟),则6个导航项目应该在970px上均匀地隔开自己top-bar.第一个和最后一个导航项应分别左右对齐.

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

要求

• 解决方案应该是基于CSS的.
• 该解决方案应与Foundation 5的兼容性图表相匹配.也就是说这意味着它需要支持IE9 +.
• 下方$topbar-breakpoint的top-bar应该工作正常.

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

Answer 1

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

的jsfiddle

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

更新

你也可以使用这个jQuery解决方案作为后备,因为我没有找到任何polyfill flexbox: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;
}

Answer 2

这是一个可能需要一些调整的解决方案

JSF 在这里

坚持仅 CSS 的要求，我能想到的唯一可行的方法是使用 CSS 表。我们创建嵌套表、表行和表单元格。默认情况下，表格单元格将尝试在其自身和其他表格单元格之间保持相等的间距。

表行需要跨越整个顶部栏减去任何基础顶部栏标题区域。为此，我们使用溢出：隐藏技巧来使 .top-bar-section 跨越顶栏的剩余宽度。最后，我们用一个 div 包裹我们的顶栏，该 div 具有 display: table 并跨越其父级。

这是相关的CSS

.top-bar-section {
    overflow: hidden;
}
.center-topbar {
    display: table;
    width: 100%;
}
.center-topbar .full-width {
    display: table-row;
}
.center-topbar .full-width li {
    display: table-cell;
    float: none;
    text-align: center;
}

我们剩下的是一个顶栏，其元素居中且宽度根据其内容而变化。工作$topbar-breakpoint也正常。

改进？

在我这边（OS X）上，Chrome + Safari 运行良好。对于 Firefox，由于删除了左侧浮动，因此不显示下拉箭头。只是想发布此内容以使对话继续下去。有人有什么改进吗？