html - 当浏览器增加/减少时，布局背景和前景不会以相同的速率调整

Question

我有一个正在使用的测试页:

128.48.204.195:3000

我遇到的问题是顶部的黄色条。如果您将浏览器设置得足够窄，黄色条将停止与屏幕的其余部分一起调整，并且蓝色按钮开始从页面和黄色条中伸出。

我怎样才能让黄色条和按钮以相同的速度调整而不让东西突出？

Answer 1

将 .nav 宽度更改为 100%。然后它将始终填充其内容。您设置了静态大小，因此一旦包含元素变小，它就会保持其大小，从而突出显示。

.nav_bar .nav {
    width: 100%;
    height: 40px;
    margin: 0 auto;
    position: relative;
    z-index: 20;
}

或者像 Thirtydot 在下面指出的那样，您可以完全删除宽度。