如何使页面水平滚动？

Question

我制作了这三个部分，我希望它们各自在整个屏幕上拉伸，我设法用width做到了，但我不知道如何设置height是屏幕的100％，主要是我希望它们水平滚动，而不是像往常一样垂直滚动。我的代码可以修复吗？

看一下下面的片段：

body {
  margin: 0;
  padding: 0;
}
.element {
  width: 100%;
  background-color: #333;
  height: 100px;
  margin: 0;
  padding: 0;
}
.element2 {
  width: 100%;
  background-color: #000;
  height: 100px;
  margin: 0;
  padding: 0;
}
.element3 {
  width: 100%;
  background-color: #111;
  height: 100px;
  margin: 0;
  padding: 0;
}
.element p {
  padding: 0;
  font-family: "Bebas Neue";
  font-size: 50px;
  color: #ffffff;
  position: absolute;
}
.element2 p {
  padding: 0;
  font-family: "Bebas Neue";
  font-size: 50px;
  color: #ffffff;
  position: absolute;
}
.element3 p {
  padding: 0;
  font-family: "Bebas Neue";
  font-size: 50px;
  color: yellow;
  position: absolute;
}

<div class="element">
  <p>Element #1</p>
</div>

<div class="element2">
  <p>Element #2</p>
</div>

<div class="element3">
  <p>Element #3</p>
</div>

Answer 1

尝试使用flexbox，并将html和body都设置为height: 100%;

html, body {
  height: 100%;
}
body {
  margin: 0;
  display: flex;
}
.element {
  flex: 0 0 100%;
}
.element1 { background: pink; }
.element2 { background: lightgreen; }
.element3 { background: lightblue; }

<div class="element element1">Element #1</div>
<div class="element element2">Element #2</div>
<div class="element element3">Element #3</div>

Answer 2

制作所有部分inline-block，使它们彼此分开。

.element { display: inline-block; }