javascript - 如何使 Foundation 5 顶部栏(导航栏)元素使用所有可用空间

Question

这是我当前导航栏的代码笔:DEMO

您可以看到这些元素并没有分散开来占据所有给定的空间。问题是，如果你让它们均匀分布，它们将不再全部适合条形并最终出现在第二行(在 codepen 上运行 js 以查看)。

我正在寻找两个修复程序之一:

1) 将空白空间展开，以将它们均匀地填充到横条上，而无需进入第二行。

2) 使两行文本适合栏，所有文本垂直居中。

不过，如果您能想出另一个适用于 Chrome、Firefox 和 IE9+ 的版本，我也会接受。

请记住，栏中的元素数量可能会发生变化。

Answer 1

要使它们均匀分布，您可以将列表设置为显示为表格，并将元素设置为单元格。这将实现您的目标。

CSS:

#nav {
  width: 100%;
  display: table !important;
}
#nav li {
  display: table-cell;
  text-align: center;
  float:none;
  height: 100%;
} 
#nav li a {
    padding-left: 0;
    padding-right: 0;
}

值得注意的是，这是一个 CSS 问题，并非特定于 Foundation 或其 Topbar 功能。

已更新

IE 需要从链接中删除填充，否则它会包裹较长的菜单项。 Firefox 需要 LI 上的 100% 高度来解决高度问题。