Question

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

造成的更大问题是我的事情似乎偏离了中心。尽管只有一点，但是一旦您注意到它（大约需要凝视3秒钟），它就不会消失并且非常令人沮丧。我张贴了一个超小型浏览器窗口的屏幕截图。我还发布了代码。

Image

<!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>

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

Answer 1

将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>

Answer 2

Div是块元素，除非您特别需要，否则无需定义任何宽度。

因此，在这种情况下，只需除去宽度即可解决问题。

 body {
                margin: 0;
            }
            div {
                height: 60vh;
                margin: 0 0 1vh 0;
                background-color: #CCC;
                text-align: center;
            }

<!DOCTYPE html>
<html>
   
    <body>
        <div>A div tag</div>
        <div>A div tag</div>
    </body>
</html>

Answer 3

要删除水平滚动条，请width: auto

HTML不允许垂直滚动条创建水平滚动条

3 个答案: