调整窗口大小时导航移动

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;
}

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