Question

这是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中时，我非常确定它已停止工作。

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

我已经检查过基金会文档，但没有发现任何有用的内容。

Answer 1

根据我的理解，您试图将选项卡置于列中。默认情况下，Foundation会向元素添加 float：left; 。

只需将以下内容添加到 .tabs dd CSS即可。

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

工作示例：JSFIDDLE

Zurb Foundation Tabs在造型后破碎

1 个答案: