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

Question

Zurb基金会的top-bar非常有用。它作为站点/应用程序的主导航功能非常好，并在较小的设备上折叠成移动友好的格式。

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

示例

如果top-bar有6个nav项(宽度可变长度标题)，并且我们对.rows使用默认宽度1000 of (有15 of槽)，则6个导航项应该在970 of top-bar中均匀地间隔。第一项和最后一项应分别对左和右对齐。

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

Requirements

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

下面是一个已经加载了Foundation5资源的jsFiddle。

Answer 1

这是另一个解决办法。它基于flexbox，浏览器很长时间都不支持它，它仍然只是一个候选的推荐：CSS柔性盒布局模块

jsFiddle

如果你提供了一个很好的退路，就像原来的基金会CSS一样，可以使用它。

更新

您也可以使用这个jQuery解决方案作为后盾，因为我还没有找到任何用于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

这里有一个解决方案，可能需要稍微调整一下

JSFiddle在这里

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

表行需要跨越整个topbar，减去任何基金会topbar标题区域。要做到这一点，我们使用一个溢出:隐藏的技巧，使. topbar部分跨越剩余的顶部宽度。最后，我们用一个div包装我们的顶板，这个div有显示: 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也正常工作。

改进？

工作在Chrome + Safari在我的终端(OS )。对于Firefox，下拉箭头没有显示，原因是左浮点数被移除。只是想发个帖子让谈话进行下去。有人有什么改进吗？

Answer 3

这里有一个解决方案，使用一些内置的基础classes...basically，我添加了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>

将“包含到网格”类添加到nav元素中，将"web按钮-组大块-网格-6“添加到”section.top-bar-节> ul“(该节中的第一个ul )。

和blammo...seems可以很好地跨浏览器工作。