如何使用垂直堆疊的選項卡來代替水平？

Question

我在CSS這套標籤：

/*tabs*/ 
.tabs { 
    position: relative; 
    min-height: 200px; 
    clear: both; 
    margin: 25px 0; 
} 

.tab { 
    float: left; 
} 

.tab label { 
    background: #eee; 
    padding: 10px; 
    margin-left: -1px; 
    position: relative; 
    left: 1px; 
} 

.tab [type=radio] { 
    display: none; 
} 

.tab-content { 
    position: absolute; 
    top: 28px; 
    left: 0; 
    background: #f7faff; 
    right: 0; 
    bottom: 0; 
    padding: 20px; 
    border: 1px solid red; 
} 

[type=radio]:checked ~ label { 
    background: white; 
    border-bottom: 1px solid white; 
    z-index: 2; 
} 

[type=radio]:checked ~ label ~ .tab-content { 
    z-index: 1; 
} 

從這裏：http://css-tricks.com/functional-css-tabs-revisited/

我怎樣才能讓他們垂直堆疊？ Css並不是我的專長和思想領域，當我在玩弄我目前的​​工作時，我會問這裏。我試圖保留純CSS的實現，但垂直堆疊標籤的左側或右側。

Answer 1

的選項卡的div，因此塊級元素，如果你刪除

.tab { 
    float: left; 
}