タブコントロールのCSS権限を取得する

Question

参照先：http://jsfiddle.net/XEbKy/3/

私は2つのタブのレイヤーを持っています。最上層には2つのタブがあります。下のレイヤーには3があります。 これらのすべてを、一番上のタブのそれぞれが水平なスペースの1/2を占め、下部のタブのそれぞれが水平スペースの1/3を占める素敵な四角形に入るようにします。 I全体ものの幅を一定にしたい：

#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を使用して構築する必要があります。それらは類似のアイテムのグループであるため、意味的にはリストを使用する意味があります。ここではそれを行う方法は次のとおりです。

<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を必要とfloat:left（そう、彼らは一般的にdisplay:blockアイテムとして累積しない（ので、あなたはwidthを使用することができます<span>は通常幅の宣言を許可していません。）行う）。

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; 

}