缩小时布局混乱

Question

我做了一个固定的布局，它在所有浏览器上都很好用。但是当缩小至少一个滚轮滚动 (90%) 时，第二个导航 (#header-navigation) 项目会分成更多行，并将下面的元素推到他们的位置之外。我尝试使用 em 和 % 设置字体大小、填充和边距，但效果不佳。如果我为 #header-navigation 设置了溢出：隐藏，我可以毫无问题地缩小 50%。这对我来说完全足够了，但是隐藏不是一种选择。

你可以在这里看到它：http://palivonas.lt/test/stackoverflow/

编辑：可以在 Chrome 和 IE9 上运行（感谢 @GGG），但 Firefox 仍然将 #social 框向下推，即使导航不再中断行。

Answer 1

这里有一个修复。

将列表项的display 属性更改为inline-block，并删除float。

#header-navigation li {

    background: url(images/slash_header.png) right no-repeat;
    padding-right: 26px;
    margin-right: 19px;
    display: inline-block;

}

将white-space: nowrap 添加到包含导航的有序列表中。

ol, ul {

    list-style: none;
    white-space: nowrap;

}