Question

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

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

示例

如果top-bar有6个导航项（宽度变化的长度标题），并且我们使用默认宽度1000px的.row s（15px排水沟），则6个导航项应均匀分布横跨970px top-bar。第一个和最后一个导航项应分别左右对齐。

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

要求

解决方案应该是基于CSS的。
解决方案应与Foundation 5's compatibility chart匹配。也就是说这意味着它需要支持IE9 +。
在$topbar-breakpoint下面top-bar应该正常工作。

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

Answer 1

这是另一种解决方案。它基于flexbox，浏览器不支持很长时间，它仍然只是一个候选推荐：CSS Flexible Box Layout Module

jsFiddle

如果你提供一个好的后备，就像原来的基础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表。我们创建嵌套表，表行和表单元格。默认情况下，表格单元将尝试在其自身与其他表格单元格之间保持相等的间距。

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

这是相关的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>

添加了类＆＃34;包含到网格＆＃34;到nav元素添加了类＆＃34; web按钮组大块网格6＆＃34;到＆＃34; section.top-bar-section＆gt; UL＆＃34; （该部分的第一个ul）

和blammo ......似乎跨浏览器工作得相当不错

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

3 个答案:

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

这是相关的CSS

改进？