窗口调整大小时元素相互重叠答案

【问题标题】：Elements overlapping eachother on window resize窗口调整大小时元素相互重叠
【发布时间】：2012-08-02 01:40:10
【问题描述】：

在我使用Foundation 构建的this template 上，除了两个导航栏外，一切看起来都正确且响应迅速。它们都是自己的<div class="row">，但它们在窗口调整大小时相互重叠。

（如果有帮助的话，有一个@media only screen and (max-width: 767px) 应该让它看起来更干净）。

【问题讨论】：

【解决方案1】：

实际上，如果您使用开发人员工具在 chrome 上打开页面，或者使用 firebug 在 Firefox 中打开页面，您会看到当您将页面设置为小于 767px 宽度时，就会出现问题，因为您的 @media 仅屏幕和（最大-宽度：767 像素）。我建议检查 css 原因，如果你从 html 中删除它，你会得到更好的结果，所以你可以检查 css 中的哪些属性让你的 div 变得疯狂。

【讨论】：

谢谢！我自己添加了一个答案，只是为了记录我采取的步骤。

【解决方案2】：

尝试将foundation.css（第148 行附近）.row 类高度增加到140px 并将主链接移动到主内容顶部的某个位置？该代码严重需要使用高度/边距或 div 块 imo :)

编辑：粗略编辑foundation.css行不是您需要的，为该特定高度设置制作单独的css类，并通过正确的媒体查询触发使用它（宽度会导致问题发生）。这样你就可以围绕顶部导航调整任何你喜欢的类，它不是很漂亮，但它可以让事情顺利进行。

【讨论】：

【解决方案3】：

正如Jorge Aguilar 所说，问题在于应用于每个<li> 的float: none。此外，我使用width: 100% 属性在整个屏幕上拉伸元素（就像它最初使用浮动一样，但没有重叠）

【讨论】：