Question

我是HTML / CSS的新手，我正在为我的乐队工作。我遇到的问题是，当我调整窗口大小时，文本会混乱，徽标会缩小。我已经研究过这个问题，但到目前为止还没有运气。常见的解决方案似乎是将一个包装类应用于整个文本体，指定一个最小宽度，但是没有用。

我希望页面的所有内容都能保持在调整浏览器窗口大小时的位置。这是我的HTML：

＆＃13;

body {
  background-color: black;
}

.wrapper {
  margin-left: auto;
  margin-right: auto;
  max-width: 960px;
}

.banner {
  position: absolute;
  top: 20px;
  margin-left: 40px;
}

.navbar {
  color: skyblue;
  font-size: 17px;
  font-family: "Courier New";
  font-weight: lighter;
  position: absolute;
  top: 350px;
}

.navbarlinks {
  text-decoration: none;
  color: skyblue;
}

a.navbarlinks:hover {
  color: azure;
}

＆＃13;

<body>

  <div class="wrapper">

    <div class="banner">
      <img src="https://i.imgur.com/8d3CGHC.jpg" height=80% width=80%>
    </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="dance.html">C o n t a c 
                t</a>
      </h1>

    </nav>

  </div>

</body>

＆＃13;

这里的页面看起来像全屏：

（https://i.imgur.com/NuwgLnz.png）

然后当我使浏览器窗口变窄时：

（https://i.imgur.com/S1EZFHy.png）

任何提示都非常感谢，这让我疯狂。谢谢！

使用包装器来防止元素四处移动？

0 个答案: