css - 调整窗口大小时，div 移动到另一个 div 下方

Question

当我调整浏览器窗口的大小时，我的导航栏 div 低于搜索框 div。如何停止导航栏移动并将其保持在同一位置？页脚的行为本身及其结构是否相同？

这是一个链接...

http://www.signport.co.uk/test/asg_template3.html

谢谢！

Answer 1

发生这种情况是因为您的菜单没有指定宽度。而您的页脚行为是因为它具有指定的宽度（带有 id 的 div footerleft）

Answer 2

替换你的 CSS

#mainmenu3 {
    height: 150px;
    line-height: 20px;
    list-style-type: none;
    overflow: hidden;
    width: 100%;
}

你会得到想要的输出

Answer 3

我现在正在 Chrome 上进行测试，删除您在导航栏 div （wrapper_menu_full 类）上设置的 width:100% 似乎可以解决问题。这个 100% 是指它的大小与包含的 div (#mainmenu3) 相比。

如果这在 IE7 上仍然不起作用，请尝试将 #mainmenu3 中的两个 div 设置为 display:inline，尽管现在我正在 Chrome 上进行测试，但它似乎没有任何区别。

Answer 4

您在两个 div（搜索过滤器和菜单）上都使用了浮动元素。当您使用浮动元素时，最后一个浮动元素的宽度超过了父元素的宽度，它会移动到下一行（belov）。

将其放入您的 css 以使其按您的意愿工作：

#mainmenu3{position:relative;}
#search4{position:absolute;top:0;left:0;}
.wrapper_menu{position:relative;top:0;left:310px;}