獲取標籤控件的css權利

Question

請參閱：http://jsfiddle.net/XEbKy/3/

我有兩層選項卡。在頂層我有兩個選項卡。在底層我有3. 我希望所有這些都落在一個不錯的矩形中，其中每個頂部製表符佔用1/2水平空間，而每個底部製表符佔用水平空間的1/3。 我想的整個東西寬度是恆定的：

#top-menu 
{ 
    width:20em; 
} 

和每次服用的50％的頂行元素：

.menu-tab 
{ 
    width:50%; 
    background-color:lime; 
} 

和每個底部行元素取33％ ：

.view-tab 
{ 
    width:33.33333%; 
    background-color:red; 
} 

但它不起作用，因爲我想。我錯過了什麼？我該如何解決它？

這是基於Diodeus的回答小提琴：http://jsfiddle.net/CASM6/1/

Answer 1

菜單應建立使用列表，而不是資料覈實。因爲它們是一組相似的項目，所以它使用語義來使用列表。以下是如何做到這一點：

<div id='top' class="menu"> 
    <ul> 
     <li>Top 1</li> 
     <li>Top 2</li> 
    </ul> 
</div> 
<div id='bottom' class="menu"> 
    <ul> 
     <li>Bottom 1</li> 
     <li>Bottom 2</li> 
     <li>Bottom 3</li> 
    </ul> 
</div> 

CSS：

.menu ul, ,menu li { 
    list-style-type:none; 
    margin:0; 
    padding:0; 
} 

.menu li { 
    display:block; 
    float:left; 

} 

#top li { 
    background-color:lime; 
    width:50% 
} 

#bottom li { 
    background-color:red; 
    width:33.33% 
} 

Answer 2

你需要display:block（所以你可以使用width<span>通常不允許寬度聲明。）和float:left（所以他們不堆棧display:block項目一般做）。

http://jsfiddle.net/vBa7m/

.menu-tab 
{ 
    width:50%; 
    background-color:lime; 
    display: block; 
    float: left; 

} 
.view-tab 
{ 
    width:33.33333%; 
    background-color:red; 
    display: block; 
    float: left; 

}