Question

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

我尝试使用小中心而没有任何区别。

版本：基础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>

Answer 1

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

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

基础4 - 部分 - 中心选项卡

1 个答案: