时间戳

首页 > 解决方案 > HTML不要让垂直滚动条创建水平滚动条

html - HTML不要让垂直滚动条创建水平滚动条

问题描述

在我的 HTML 页面中，我有很多宽度：100vw 的东西占据了整个页面。有一个垂直滚动条，它会导致一个水平滚动条（因为垂直滚动条占用了大约 20 个像素）。

这导致的更大问题是我的事情似乎偏离了中心。虽然只是轻微的，但一旦你注意到它（大约需要 3 秒钟的凝视），它就不会消失，而且非常令人沮丧。我发布了一个超小浏览器窗口的屏幕截图。我还发布了代码。

图片

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      margin: 0;
    }
    
    div {
      width: 100vw;
      height: 60vh;
      margin: 0 0 1vh 0;
      background-color: #CCC;
      text-align: center;
    }
  </style>
</head>

<body>
  <div>A div tag</div>
  <div>A div tag</div>
</body>

</html>

文字偏离中心。我该如何解决？

标签： htmlcssuser-interfacescrollbar

解决方案

将 div 更改为宽度：100%？

body {
    margin: 0;
}

div {
    width: 100%;
    height: 60vh;
    margin: 0 0 1vh 0;
    background-color: #CCC;
    text-align: center;
}
<div>A div tag</div>
<div>A div tag</div>

推荐阅读