CSS 故障 : Float drops to another line (all browsers)

Question

我知道如果父容器不够宽， float 会掉到下一行。

我的网站 working on是带有 ThemeForest 主题 (Fortis) 的 Magento 1.7.2 安装。当我包含 Twitter Bootstrap 时，预期的问题开始了(我显然是在 的顶部完成的)。

我的 div.header 是 960px 宽。它包含:

• div.header-top 工作正常。
• h1.logo 向左浮动，比需要的窄(当前为 200px，应该是 400px)。
• div.header-left 元素，当前为空，左边距为 20px。
• div.header-right 元素，宽度为 485px，向右浮动。

问题是，如果我将 h1.logo 变宽，div.header-right 会掉到下一行。

我应该能够毫无问题地将 div.header-left 设置为 455px。我错过了什么？

Answer 1

想通了。看起来顶部的搜索栏在底部有一个边距，并将 .header-right 推到左边。

右键单击搜索字段上的“检查元素”，您就会明白我的意思了。

您必须移除边距或调整 .header-top-search-wrapper 的高度。