Question

我正在将现有应用程序的某些部分重写到Foundation Framework 6上。现在，我正在使用Foundation Tabs，并且我试图使Tabs水平扩展以填充所有可用的水平空间。这样做是为了与该网站的先前版本相匹配。

我已经在jsfiddle中研究了一个示例，以找到解决方案。不幸的是，它仍然看起来像这样：

在jsfiddle中的示例中，这是我当前进度的链接：https://jsfiddle.net/9j6vpdm3/1/

此jsfiddle是我能够在StackOverflow（Justified tabs in Foundation for Apps project）中找到的最接近答案的示例实现。不幸的是，此解决方案无法正常工作，因为您可以看到选项卡仍保持对齐状态，并且仍然有足够的水平空间可用。

我通过Google在Zurb论坛上找到了其他解决方案，但是答案太旧了，建议的链接不再起作用。

是否有一种技巧可以使“基础”选项卡动态扩展以填充所有可用的水平空间？

$(document).foundation();

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.1.2/foundation.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.1.2/foundation.min.js"></script>


<style>
 div.tabs .tab-item {
    flex-grow: 1;
    text-align: center;
}
 </style>
 <div style="text-align: center">
   <ul class="tabs" id="example-tabs" data-tabs>
      <li class="tabs-title"><a href="#panel-0" aria-selected="true">Title 1</a></li>
      <li class="tabs-title"><a href="#panel-1" aria-selected="true">Title 2</a></li>
      <li class="tabs-title"><a href="#panel-2" aria-selected="true">Title 3</a></li>
      <li class="tabs-title"><a href="#panel-3" aria-selected="true">Title 4</a></li>
    </ul>
</div>

 <div class="tabs-content" data-tabs-content="example-tabs">
    <div class="tabs-panel" id="panel-0">
        <p>Content1 </p>
    </div>
    <div class="tabs-panel" id="panel-1">
        <p>Content 2 </p>
    </div>
    <div class="tabs-panel" id="panel-2">
        <p>Content 3 </p>
    </div>
    <div class="tabs-panel" id="panel-3">
        <p>Content 4 </p>
    </div>
  </div>

Answer 1

您可以使用flexbox进行此操作，几乎适用于您尝试控制的带有直接子容器的任何容器。

使用flex父级，子级可以通过设置flex属性来扩展以均匀填充空间。 flex：1 0 0;

示例：https://codepen.io/rafibomb/pen/NJyYQE

.tabs {
  display: flex;

  .tabs-title {
    flex: 1 0 0;
    text-align: center;

    & + .tabs-title {
      border-left: 1px solid #ddd;
    }
  }
}

Answer 2

@rafibomb 的答案是正确的并且可以工作，但您也可以利用 Foundation 的内置实用程序类。

您可以将 flex-container 类添加到 ul.tabs 元素，并将 flex-child-auto 类添加到每个 li.tabs-title 元素。

这是一个例子：

<div style="text-align: center">
   <ul class="tabs flex-container" id="example-tabs" data-tabs>
      <li class="tabs-title flex-child-auto"><a href="#panel-0" aria-selected="true">Title 1</a></li>
      <li class="tabs-title flex-child-auto"><a href="#panel-1" aria-selected="true">Title 2</a></li>
      <li class="tabs-title flex-child-auto"><a href="#panel-2" aria-selected="true">Title 3</a></li>
      <li class="tabs-title flex-child-auto"><a href="#panel-3" aria-selected="true">Title 4</a></li>
    </ul>
</div>

基础选项卡展开以填充容器中所有可用的水平空间吗？

2 个答案: