父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元素）延伸到此元素的边界之外。

第三，调整边距和填充。我在.navigation上保留了5px填充，但我添加了一个负的上边距和一些边距到.item。

我不清楚你是想要滚动这些项目，还是显示为下拉列表，所以我已经做了两件事：

as a dropdown

as a scroll-box

Answer 2

您可以使用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>

Answer 3

如果你把：

display: inline;

在subnavigation课程中，您应该让它看起来与您的表格示例类似。

工作示例：

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

结果如下：