父DIV中的高度不同

Question

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

我正在制作一个类似Twitter的栏,我想让它显示一些通知,如JSFiddle所示.它是一个菜单栏(主页,连接,朋友,帐户)和一个登录按钮,所有都是动态的浏览器宽度,所以我不能把它margin:auto;.我希望在第二个示例中显示,但使用第一个语法,因为我不能使用表.码:

.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.这样做可以完成两件事:它将所有物品放在一条线上,然后将它们的容器包裹起来,这样你的"下拉列表"的大小就适合下拉列表中的最大项目.

其次,你需要删除overflow: hidden的.navigation.这将允许元素(.item在这种情况下为元素)超出此元素的边界.

第三,调整边距和填充.我保持5px填充.navigation,但我添加了一个负的上边距和一些边缘.item.

我不清楚你是否想要滚动这些项目,或者显示为下拉列表,所以我做了两个:

作为下拉列表

作为一个滚动框