html - 缩小时布局困惑

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;

}