Zurb foundation 基础标签扩展以填充容器中所有可用的水平空间？ 我正在把我现有的应用程序的部分改写到基础框架6。现在我正在使用基础选项卡，我试图让标签水平扩展，以填补所有可用的水平空间。这样做是为了与该站点以前版本的外观相匹配

为了找到解决方案，我在JSFIDLE中编写了一个示例。不幸的是，它仍然是这样的：

下面是我在JSFIDLE中的一个示例中当前进度的链接：

这个JSFIDLE是我在StackOverflow（）中找到的最接近的答案的示例实现。不幸的是，这个解决方案不起作用，因为您可以看到选项卡仍然是左对齐的，并且仍然有足够的水平空间可用

我通过谷歌在Zurb论坛上找到了其他解决方案，但答案太旧，建议的链接不再有效

有没有办法让基础选项卡动态扩展以填充所有可用的水平空间？

$（document.foundation（）

div.tabs.tab项{
柔性生长：1；
文本对齐：居中；
}






内容1

内容2

内容3

内容4

您可以使用flexbox来实现这一点，对于任何包含您试图控制的直接子容器

对于flex父级，通过设置flex属性，子级可以展开以均匀填充空间。弹性：100

例如：

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

您可以将
flex容器
类添加到
ul.tabs
元素，并将
flex子自动
类添加到每个
li.tabs标题
元素

以下是一个例子：

<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>









<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>