CSS导航栏调整大小问题

Question

所以我知道这是一个令人困惑的问题。基本上，我在页面顶部有两个div，包括导航和搜索栏。

我有一个完整的容器         #containPage     宽度：1000像素;     保证金：0自动;     }

用于固定宽度的页面。直到最后，我认为这并没有结束，并且有两个较小的容器用于布局，左右浮动。

当我在浏览器中调整页面大小时，顶部的布局会移动并改变定位，这是我不希望发生的。

有什么想法吗？

这里是链接：它现在更加笨拙并且导航链接到右边，所以也许有人可以帮助它。

http://www.sophisticatedmoose.com/nerdery/

• 在Chrome和Firefox for Mac中横向调整大小。如果你滚动到右边，我应该在搜索页面下方有一个导航栏，包含主页，关于，新闻和联系人。最后我检查了 - 我正在清理缓存 - 它在左边和页脚一起关闭了。

处理图像。我需要声望10才能进入。我已经得到了它。

Answer 1

你的CSS中有这个奇怪的构造：

#containPage { /*page I am in you*/
    width:223%;
    margin:0 auto;
}

边距设置很好而且合理，但宽度相当，嗯，奇怪。 #containPage元素本质上是整个页面，因此它自然与浏览器窗口一样宽，然后应用223％，页面本身变为浏览器窗口宽度的两倍多。然后，作为#containPage的直接子元素的所有块元素将超过窗口宽度的两倍，除非您以其他方式指定或暗示宽度。

特别是#NavRRT元素太宽，#NavRRT内的菜单会一直向窗口浮动，你必须水平滚动才能看到它。类似的定位奇怪发生在#footer。

首先删除width:223%上的#containPage。如果我只关闭那一块CSS，那么这个页面在Safari和Chrome中看起来很不错。

更新：您可能希望在<div>内添加其他#containPage，然后添加max-width，min-width和margin: 0 auto为了保持主要内容的中心和合理的大小。目前#containPage内的所有内容都会进入新的<div>。如果你采用这种方法，那么你可能根本不需要#containPage上的任何CSS，它只需要帮助将“真实”页面集中在一起。

Answer 2

您必须从导航LI中删除左边距（它继承自li）并删除其宽度。

#nav li { margin-left: 0; width: auto !important; }