浏览器重新调整大小会更改<nav>元素</nav>的位置

Question

这就是我的网页的样子。但是当我重新调整浏览器大小时，元素会改变位置并随垂直滚动条移动！如何将它们固定在顶部？

我的html5代码：

<header id="container">
        <div id="logo">
            <a id="index" href="index.html"><img src="img/LOGO.PNG" alt="Scope in CST" /></a>
        </div>

        <nav id="menu">
            <a href="about.html">About</a>
            <a href="events.html">Events</a>
            <li id="smenu"><a href="#">Communities</a>
            <ul class="submenu">
                <li><a href="#">Speakers</a></li>
                <li><a href="#">Students</a></li>
                <li><a href="#">Ambassadors</a></li>
                <li><a href="#">Technology</a></li>
                <li><a href="#">Idea</a></li>
            </ul></li>
            <a href="#">Angel Investors</a>
            <a href="contact.html">Contact Us</a>
            <a href="timeline.html">Timeline</a>
            <Button type="button" onClick="location.href='memebrs.scopecst.org';">Login</Button>
        </nav>
    </header>

这是我到目前为止在css中所做的：

Answer 1

当您调整浏览器大小时，您正在更改整个屏幕的宽度，因此菜单会停止适合。此外，它不会在导航中，因为您在导航上有一个设置的高度，因此导航保持相同的大小，而您的登录按钮弹出了阵容。登录按钮向下跳，因为（仔细查看代码）您有margin-left: 150px;因此登录按钮必须始终距离左侧150px。可能的修复（尽管它不是最理想的修复）是使用float: right;代替登录按钮。这应该允许它在您调整页面大小时滑动到<nav>菜单附近。