象限布局中的 Zurb Foundation 选项卡答案

【问题标题】：Zurb Foundation's tab in quadrant layout象限布局中的 Zurb Foundation 选项卡
【发布时间】：2015-04-15 21:22:03
【问题描述】：

我想使用我从 Zurb Foundation 文档中找到的代码。不幸的是，选项卡是水平布局的。我需要他们这样 -

这是来自 Zurb Foundation 的标签代码及其链接

http://foundation.zurb.com/docs/components/tabs.html#tabs-deeplink-2

<ul class="tabs" data-tab role="tablist">
  <li class="tab-title active" role="presentational" ><a href="#panel2-1" role="tab" tabindex="0" aria-selected="true" controls="panel2-1">Tab 1</a></li>
  <li class="tab-title" role="presentational" ><a href="#panel2-2" role="tab" tabindex="0"aria-selected="false" controls="panel2-2">Tab 2</a></li>
  <li class="tab-title" role="presentational"><a href="#panel2-3" role="tab" tabindex="0" aria-selected="false" controls="panel2-3">Tab 3</a></li>
  <li class="tab-title" role="presentational" ><a href="#panel2-4" role="tab" tabindex="0" aria-selected="false" controls="panel2-4">Tab 4</a></li>
</ul>
<div class="tabs-content">
  <section role="tabpanel" aria-hidden="false" class="content active" id="panel2-1">
    <h2>First panel content goes here...</h2>
  </section>
  <section role="tabpanel" aria-hidden="true" class="content" id="panel2-2">
    <h2>Second panel content goes here...</h2>
  </section>
  <section role="tabpanel" aria-hidden="true" class="content" id="panel2-3">
    <h2>Third panel content goes here...</h2>
  </section>
  <section role="tabpanel" aria-hidden="true" class="content" id="panel2-4">
    <h2>Fourth panel content goes here...</h2>
  </section>
</div>

【问题讨论】：

标签： tabs zurb-foundation-5

【解决方案1】：

如果您在 .tabs 上使用最大宽度，它应该可以正常工作。

.tabs {
  max-width: 300px;
}

因为inline 和float: left 选项卡的最大宽度会限制它们并使它们垂直向下。

工作示例：http://codepen.io/nathanw/pen/zxgjrO

【讨论】：