水平滚动 - 白色间隙问题答案

【问题标题】：Horizontal Scrolling - white gap issue水平滚动 - 白色间隙问题
【发布时间】：2017-08-29 07:00:36
【问题描述】：

我目前正在编写一个水平站点，我遇到的唯一问题是 div 之间的空白。我已经尝试为所有 div 添加 0 填充和边距，但它仍然无法正常工作。有谁知道是什么问题？

这是我的问题的一个简单示例：

https://codepen.io/Omgyouwould/pen/RZeegP

* {
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
  width: 100%;
}

.main_wrap {
  height: 100%;
  width: 100%;
  white-space: nowrap;
  overflow-y: hidden;
  margin: 0;
  padding: 0;
}

.wrapper {
  height: 100%;
  width: 100%;
  display: inline-block;
  color: white;
  padding: 30px;
}

/* colors */

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

.red {
  background-color: red;
}

<div class="main_wrap">
  <div class="wrapper green">
    <h1>Hello there.</h1>
    </br>
    <p>Use the botton scroll bar to navigate.</p>
  </div>
  <div class="wrapper blue">
    <h1>Hello there.</h1>
    </br>
    <p>Use the botton scroll bar to navigate.</p>
  </div>
  <div class="wrapper red">
    <h1>Hello there.</h1>
    </br>
    <p>Use the botton scroll bar to navigate.</p>
  </div>
</div>

【问题讨论】：

标签： html css

【解决方案1】：

这似乎是内联块的常见问题，here 概述了一些替代方案/解决方法。添加负边距效果很好，但这不适用于一些较旧的浏览器（IE 6/7）。

【讨论】：

谢谢！不敢相信我忽略了 -45px 边距选项。