css - 网页右侧空白问题

Question

我一直在尝试确定网页上出现以下问题的原因。

使用下面的代码，当调整任何浏览器的大小时并且页面变为可水平滚动时，右侧会出现一个空白。

如何删除这个空白？感谢您提供的所有帮助!

body {
  margin: 0;
  padding: 0;
}
.wrap {
  background-color: #2a2c67;
}
.main {
  height: 50px;
  text-align: center;
  width: 1300px;
  margin-right: auto;
  margin-left: auto;
  color: #fff;
}

<div class="wrap">
  <div class="main">Content Goes Here</div>
</div>

Answer 1

容器“wrap”没有设置宽度，因此作为 block 元素，它将占据实际窗口大小的 100%。当您水平滚动时，因为 child 的固定宽度大于他的 parent 和实际窗口，您将滚动 child ，但 parent 将保持其 atm 的任何窗口大小并滚动出窗口。它不会动态地改变他当前的宽度(正如浏览器理解的那样)来填充子宽度。

Imo 你只需要改变 child 的背景颜色来修复它(不是它坏了)。

已编辑:或者正如其他人所说...将宽度设置为换行而不是“主要”

body {
  margin: 0;
  padding: 0;
}
.wrap {
  
}
.main {
  height: 50px;
  text-align: center;
  width: 1300px;
  margin-right: auto;
  margin-left: auto;
  color: #fff;
  background-color: #2a2c67;
}

<div class="wrap">
  <div class="main">Content Goes Here</div>
</div>