0

问题：尝试连续创建 6 个居中选项卡，但是因为我不能将所有 6 个选项卡保留在同一行。它确实使选项卡居中，但是将两个选项卡推到下面一行，并在第一行留下一个额外的空单元格。

我尝试使用 small-centered 并且没有任何区别。

版本：基础4

浏览器： Chrome - 最新

代码

<div class="row">
    <div class="large-6 large-centered  columns">
        <div class="section-container horizontal-nav" data-section="horizontal-nav" >
            <section class="section">
                <p class="title"><a href="#">Tab 1</a></p>
            </section>
            <section class="section">
                <p class="title"><a href="#">Tab 2</a></p>
            </section>
            <section class="section">
                <p class="title"><a href="#">Tab 3</a></p>
            </section>
            <section class="section">
                <p class="title"><a href="#">Tab 4</a></p>
            </section>
            <section class="section">
                <p class="title"><a href="#">Tab 5</a></p >
            </section>
            <section class="section">
                <p class="title"><a href="#">Tab 6</a></p>
            </section>
        </div>
    </div>
</div>
4

1 回答 1

0

我认为开箱即用的 Foundation 4 不可能做到这一点。通过使用large-centered，您只是将包含选项卡的 div 居中，而不是选项卡本身。选项卡将始终左对齐。

您正在寻找的功能在按钮组中可用。例如button-group even-6将填满整个空间。也许可以使用 jQuery 来使用按钮组，或者查看 JavaScript 源代码并查看 Zurb 如何调整这些元素的大小并将其应用于您的部分/选项卡。

于 2013-09-22T14:47:00.863 回答