Zurb Foundation 选项卡在造型后损坏答案

【问题标题】：Zurb Foundation Tabs broken after stylingZurb Foundation 选项卡在造型后损坏
【发布时间】：2014-09-30 11:53:32
【问题描述】：

这是 html.erb 页面：

<div class="tabs-content">
  <div class="content active" id="panel1">
    <h2>Day 2</h2>
    <p>Welcome back!!</p>
  </div>
  <div class="content" id="panel2">
    <p>A <strong>commitment</strong> is when you promise to do something!</p>
  </div>
  <div class="content" id="panel3">
    <p>You have to verify you kept your commitment! You can verifiy by checking in to a location or having a friend act as your referee.</p>
  </div>
  <div class="content" id="panel4">
    <p>Be sure to fulfill your commitment!</p>
  </div>
</div>
<div class="row">
  <div class="small-8 columns small-centered">
    <dl class="tabs" data-tab>
      <div class="small-12 columns small-centered">
        <dd class="active"><a href="#panel1"> </a></dd>
        <dd><a href="#panel2"> </a></dd>
        <dd><a href="#panel3"> </a></dd>
        <dd><a href="#panel4"> </a></dd>
      </div>
    </dl>
  </div>
</div>

然后我还添加了一些样式，但我不明白为什么这会阻止链接点击单个锚点：

.tabs dd > a {
    border-radius: 50%;
    padding: 5px !important;
}

.tabs dd{
    margin: 5px;
    border-radius:50%;
}

dl.tabs {
    margin: 0px !important;
    width: 100%;
}

这是否与父元素和子元素的交互方式有关？我很确定当我开始将 dd 元素放入 div 时它停止工作。

但是这些点需要居中。有更好的方法吗？

我检查了 Foundation 文档，但没有发现任何有用的信息。

【问题讨论】：

标签： css tabs zurb-foundation

【解决方案1】：

据我了解，您正试图将标签集中在一列中。默认情况下，Foundation 会向元素添加 float: left;。

只需将以下内容添加到您的 .tabs dd CSS。

.tabs dd {
        margin: 5px;
        border-radius:50%;
        float: none;
        display: inline-block;
}

工作示例：JSFIDDLE

【讨论】：