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;

}

缩小时布局会混乱

1 个答案: