html - 浏览器调整大小会改变 元素的位置

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>。调整页面大小时的菜单。