html - CSS 导航栏调整大小问题

Question

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

我有一个完整的容器 #containPage 宽度:1000px； margin :0 自动；

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

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

有什么想法吗？

这是链接:它现在更加复杂并且导航链接向右，所以也许有人也可以提供帮助。

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

• 在 Mac 版 Chrome 和 Firefox 中水平调整大小。如果你向右滚动，我应该在搜索页面下方有一个导航栏，其中包含主页、关于、新闻和联系人。最后我检查了——我正在清除缓存——它和页脚一起在左边消失了。

处理图像。我需要声望 10 才能放入。不过我已经知道了。

Answer 1

你的 CSS 中有这个奇怪的结构:

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

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

特别是 #NavRRT元素太宽，里面的菜单 #NavRRT将一直向右漂浮到窗口之外，您必须水平滚动才能看到它。 #footer 也会出现类似的定位异常情况.

首先摆脱 width:223%在 #containPage .如果我只关闭那一段 CSS，该页面在 Safari 和 Chrome 中看起来很好。

更新:您可能想添加另一个 <div>里面#containPage , 然后添加 max-width , min-width , 和 margin: 0 auto以保持主要内容居中且大小合理。当前在里面的所有东西 #containPage会进入这个新的 <div> .如果你采用这种方法，那么你可能根本不需要任何 CSS #containPage ，它只需要在周围帮助居中“真实”页面。