Zurb基金会标签样式

问题描述：

<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增加一个float：left;的元素。

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

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

工作例如：JSFIDDLE

Zurb基金会标签样式

相关推荐