3

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

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

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

4

1 回答 1

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;

}
于 2012-05-12T08:24:47.050 回答