HTML/CSS求助：使用Wrapper类仍无法阻止窗口缩放时页面元素移位

嘿，别着急，我来帮你捋捋问题出在哪，一步步给你搞定～

问题根源拆解 #

1. 绝对定位让wrapper彻底失效：你给.banner和.navbar加了position: absolute，这会让这俩元素直接脱离文档流，外面的.wrapper根本管不住它们的位置，窗口一缩放自然就乱跑了。
2. 图片百分比宽高无约束：图片用了height=80% width=80%，但父元素.banner没设置固定宽高，这个百分比就会跟着视口大小变，窗口缩小图片就跟着缩。
3. wrapper缺少核心配置：你说加了min-width没用，本质是内部元素都脱离流了，wrapper的约束根本传不进去。

具体修复步骤 #

1. 给wrapper加上定位上下文与最小宽度 #

先让wrapper能管住内部元素，同时设置最小宽度防止窗口缩到内容错乱：

.wrapper {
  margin-left: auto;
  margin-right: auto;
  max-width: 960px;
  min-width: 750px; /* 根据你导航栏的总宽度调整，确保文字不换行 */
  position: relative; /* 让内部定位元素以它为参考 */
  padding-top: 20px; /* 代替banner的top:20px，避免绝对定位 */
}

2. 重构banner与图片样式 #

去掉绝对定位，给banner设置固定宽高，让图片自适应容器，再也不会乱缩小：

.banner {
  /* 删掉position: absolute和margin-left */
  width: 600px; /* 按你logo的实际尺寸调整 */
  margin-left: 40px; /* 保留你想要的左对齐间距 */
}
.banner img {
  width: 100%; /* 图片填满容器，自动保持比例 */
  height: auto; /* 避免拉伸变形 */
}

3. 修复导航栏的定位逻辑 #

同样去掉绝对定位，用margin调整位置，让它跟着文档流走，缩放时不会错位：

.navbar {
  color: skyblue;
  font-size: 17px;
  font-family: "Courier New";
  font-weight: lighter;
  /* 删掉position: absolute和top:350px */
  margin-top: 270px; /* 用margin代替top，调整到你想要的位置 */
  white-space: nowrap; /* 强制导航文字不换行 */
}

4. 修正HTML的小错误（顺便优化） #

你导航里的Contact链接写错指向dance.html了，顺手改过来：

<body>
  <div class="wrapper">
    <div class="banner">
      <img src="https://i.imgur.com/8d3CGHC.jpg">
    </div>
    <nav>
      <h1 class="navbar">
        <a class="navbarlinks" href="shows.html">S h o w s</a> | 
        <a class="navbarlinks" href="listen.html">L i s t e n</a> | 
        <a class="navbarlinks" href="watch.html">W a t c h</a> | 
        <a class="navbarlinks" href="dance.html">D a n c e</a> | 
        <a class="navbarlinks" href="contact.html">C o n t a c t</a>
      </h1>
    </nav>
  </div>
</body>

额外小技巧 #

导航栏的文字间距可以用letter-spacing: 2px代替手动加空格，这样更规范，也方便调整～

这样修改后，缩放浏览器窗口时，所有内容都会乖乖待在wrapper的约束里，不会错乱，logo也不会随意缩小啦～

内容的提问来源于stack exchange，提问作者Mr. Cat