css - 调整窗口大小时导航移动

Question

有没有一种快速简便的方法可以在调整窗口大小时保持导航不动？

我现在有这样的东西，这显然是错误的，因为比例会改变。

不过我不确定是否应该使用固定宽度？

#mainnav {
position: absolute;
left: 30%;
top: 75px;
width: 50%;
}

感谢您的回答。

Answer 1

这实际上取决于您要创建的页面类型。如果您要创建响应式/交互式的内容，您可能需要固定或绝对导航，但很难从您提供的代码中分辨出来。

一种更传统的方法是将您的页面内容包装在一个固定宽度的容器中:

<div id="container">
   <div id="mainnav">...</nav>
   <div id="main-content">...</div>
</div>

CSS

#container
{
   width: 1000px;
   margin: 0 auto; // will center your container inside page body, even on resize
}

#mainnav
{
   display : block;
}

这样您的导航将与内容保持一致并且不会调整大小。管理导航元素内的内容也更加容易。