基础 5 - 均匀分布的顶栏导航项目

Question

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

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

示例

如果top-bar 有 6 个导航项（宽度不同长度的标题）并且我们为.rows 使用 1000px 的默认宽度（带有 15px 间距），那么 6 个导航项应该在 970px @ 987654329@。第一个和最后一个导航项应分别左对齐和右对齐。

随着屏幕尺寸的减小，导航项目的宽度应缩小以保持其均匀间距，直到 $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;
}

Answer 2

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

JSFiddle Here

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

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

这是相关的 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 也可以正常工作。

改进？

在 Chrome + Safari 上运行良好（OS X）。对于 Firefox，由于删除了左浮动，下拉箭头不显示。只是想发布这个来让谈话继续下去。有人有什么改进吗？

Answer 3

这是一个使用一些内置基础类的解决方案......基本上我在你的小提琴中添加了 4 个类。

http://jsfiddle.net/x6jvS/7/

<div class="row">
<div class="small-12 columns">
<nav class="top-bar  contain-to-grid" data-topbar>
<ul class="title-area">
<li class="name">
  <h1><a href="#"></a></h1>
</li>
<li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
</ul>

<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="full-width web button-group large-block-grid-6">
  <li><a href="#">Link 1</a></li>
  <li class="has-dropdown">
    <a href="#">Long Link 2</a>
    <ul class="dropdown">
      <li><a href="#">First link in dropdown</a></li>
    </ul>
  </li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
  <li><a href="#">Even Longer Link 5</a></li>
  <li><a href="#">Link 6</a></li>
</ul>
</section>
</nav>
</div>
</div>

在导航元素中添加了“包含到网格”类 将类“web button-group large-block-grid-6”添加到“section.top-bar-section > ul”（该部分中的第一个 ul）

和 blammo...似乎可以很好地跨浏览器