Zurb基金會標籤樣式

這裏破碎後的的html.erb頁：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時，它停止工作。

但這些點需要居中。有沒有更好的方法來做到這一點？

我檢查了基金會文檔，但沒有發現有用的東西。

來源

2014-09-05 Justus Eapen

從我所瞭解的你試圖把標籤放在一列中。默認情況下，Foundation增加一個float：left;的元素。

只需將以下內容添加到您的.tabs dd CSS。

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

工作例如：JSFIDDLE

來源

2014-09-30 03:53:32

Zurb基金會標籤樣式

回答

相關問題