Question

以下是我当前导航栏的编解码器：DEMO

您可以看到项目没有展开以占用所有给定的空间。问题是如果你使它们均匀间隔，它们不再全部适合条形并最终在第二条线上运行（在编码器上运行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％的高度才能解决高度问题。

如何使Foundation 5顶栏（Navbar）项目使用所有可用空间

1 个答案: