異なる高

Question

http://jsfiddle.net/fdezluis96/JJ29E/3/

私はTwitterの様バーを作ってるんだ、と私はJSFiddleに示すように、それはいくつかの通知を表示します。これはメニューバー（ホーム、接続、友人、アカウント）とログインボタンであり、ブラウザの幅にはすべて動的なので、私はmargin:auto;を置くことはできません。私は2番目の例のように表示したいが、最初の構文ではテーブルを使用できないので表示したい。コード：

.navigation{ 
    padding:5px; 
    font-family: HelveticaNeue, Tahoma, Verdana; 
    color: #fff; 
    font-size:20px; 
    background: #333; 
    height:24px; 
    overflow:hidden; 
} 
.subnavigation{ 
    border:1px solid #fff; 
    border-top-width:0px; 
    border-bottom-width:0px; 
    overflow: auto; 
    background: #666; 
    border-radius:5px; 
    border-top-right-radius:0px; 
    border-top-left-radius:0px; 
} 
table{ 
    float:left; 
} 

​ 

そしてHTML：

<!--Example one, desired syntax, not working--> 
<div class="navigation">A 
    <div class="subnavigation">B.</div> 
    A 
</div> 

<br /> 
<!--Example two, working but with tables, so its not viable--> 
<table> 
    <td class="navigation">A</td> 
</table> 
<table> 
    <td class="navigation subnavigation"> 
     Scroll content<br /> 
     Lorem ipsum...LALALALA<br /> 
     Just more stuff<br /> 
     And more<br /> 
     And a bit more... 
    </td> 
</table> 
<table> 
    <td class="navigation">A</td> 
</table> 

感謝;）

Answer 1

わかりました。ここではいくつかのことが起こっています。

まず、ナビゲーション内の項目を区切る必要があります。 divを使用しましたが、float: leftをクラスitemで指定しました。これは2つのことを成し遂げます：1行にすべてのアイテムを取得し、その周囲にコンテナをラップするので、 "ドロップダウン"のサイズはドロップダウン内の最大アイテムに適しています。

を.navigationから削除する必要があります。これにより、要素（この場合は.item要素）がこの要素の境界を越えて拡張することができます。

第3に、余白とパディングを調整します。私は.navigationに5pxのパディングを残しましたが、負の上マージンといくつかの側余白を.itemに追加しました。

私はあなたがスクロールするこれらの項目を望んでいた、またはドロップダウンとして表示するので、私は両方やったかどうかについては不明だ：

as a dropdown

as a scroll-box

Answer 2

あなたが置く場合：

display: inline; 

をsubnavigationクラスでは、あなたはそれがに似て見てもらう必要がありますあなたのテーブルの例。

の作業例：

• http://jsfiddle.net/JJ29E/4/

結果がこれです：

Answer 3

あなたはdivsを使用して同じことを達成することができますが、ナビゲーションのためulは次のようになりますより意味のある。

Demo

li {list-style-type:none; display:block; float:left;} 
.navigation{ height:25px; background: #333;} 
.subnavigation{width:25%; height:100px; background:gray;} 


<ul class="navigation"> 
     <li>A</li> 
    <li class="subnavigation"></li> 
    <li>A</li> 
</ul>