html - 具有相对定位元素的水平滚动元素中的额外空间

Question

在一个小包装元素内滚动元素相对容易，但在我的例子中，这个溢出容器内的元素是相对定位的，因此每个元素都与前一个重叠。

还是很简单，我只需要操作每个元素的left即可:

.container {
  overflow: auto;
  white-space:nowrap;
  width: 400px;
}

.inner {
  width: 200px;
}

.item {
  padding: 10px;
  margin-right: 20px;
  border: 1px solid red;
  display: inline-block;
  position: relative;
  vertical-align:top;
  white-space:normal;
  width: 50px;
  height: 50px;
  border-radius: 5px;
}

.item:nth-child(odd) {
  background-color: red;
}
.item:nth-child(even) {
  background-color: blue;
}
.item:nth-child(1) { left: 0;       z-index: 1;  }
.item:nth-child(2) { left: -30px;   z-index: 2;  }
.item:nth-child(3) { left: -60px;   z-index: 3;  }
.item:nth-child(4) { left: -90px;   z-index: 4;  }
.item:nth-child(5) { left: -120px;  z-index: 5;  }
.item:nth-child(6) { left: -150px;  z-index: 6;  }
.item:nth-child(7) { left: -180px;  z-index: 7;  }
.item:nth-child(8) { left: -210px;  z-index: 8;  }
.item:nth-child(9) { left: -240px;  z-index: 9;  }
.item:nth-child(10) { left: -270px; z-index: 10; }

<div class="container">
  <div class="inner">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

但是我无法摆脱右侧的额外空间，它是在将元素堆叠在一起之后立即出现的。

我无法收缩父级 — .container — 所以我尝试收缩一个内部元素，但没有成功。

我怎样才能“修剪”这个空间？

Answer 1

如果您使用 overflow: hidden 定义您的内部 div，则堆叠元素的总宽度不会超过内部 div 的宽度。

您需要将内部宽度设置为 670px 之类的值。