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

Question

在一个小包装元素中滚动项目是相对容易做的事情，但在我的情况下，这个溢出容器内的项目是相对定位的，所以它们中的每一个都与前一个重叠。

它仍然很简单，我只需要操纵每个元素的left：

＆＃13;

＆＃13;

.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; }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但我无法摆脱在将物品堆叠在一起之后出现的右侧的额外空间。

我无法缩小父级 - .container - 所以我尝试了，如你所见，缩小内部元素但没有成功。

我怎么能＆＃34;修剪＆＃34;这个空间？

Answer 1

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

您需要将内部宽度设置为670像素。

Answer 2

您需要从position:relative;类

中删除.item

.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;*/ /*Remove this*/
  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>