实现轮播的问题

Question

我正在尝试为我正在设计的网页实现自适应轮播。我有一些问题，可能是thousends次更容易用一些屏幕截图说明，所以在这里：

如您所见，我有两个箭头来切割项目和一个水平滚动条。

箭头分别向左和向右浮动，项目只是inline-block容器内div.items个div，宽度为90％（溢出-x：滚动或过程）。

现在，如果我将另一个项目附加到DOM，我会以此结束：

为什么第四项下面？我没有浮动这些项目，正如我指定的和水平滚动一样，我希望它在后面并且能够通过滚动条看到它。

我错过了什么？

我会粘贴相关代码：

HTML：

<div class="grid">
  <div class="left-arrow"></div>
  <div class="items">

    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>

  </div>
  <div class="right-arrow"></div>
</div>

CSS：

div.grid {
  margin-top: 20px;
  padding: 10px 75px;
  text-align: center;
  z-index: 1000;
}

div.grid .left-arrow, div.grid .right-arrow {
  position: relative;
  top: 70px;
}

div.grid .left-arrow {
  float: left;
  width: 0;
  height: 0;
  margin: 0 30px 0 -50px;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-right: 35px solid #ddd;
}

div.grid .right-arrow {
  float: right;
  width: 0;
  height: 0;
  margin: 0 -50px 0 30px;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 35px solid #ddd;
}

div.items {
  display: inline-block;
  z-index: 100;
  width: 90%;
  overflow-x: scroll;
}

div.item {
  margin: 10px;
  display: inline-block;
  position: relative;
  left: 0;  
}

编辑： Oreilly正是我期待实现的目标：

http://shop.oreilly.com/category/browse-subjects/programming.do

Answer 1

容器的高度不断增加，以容纳额外的物品。我相信你应该能够通过在容器元素上设置一个特定的高度来获得你想要的效果。

编辑：在测试了一些之后，事实证明设置高度实际上不会对此产生任何影响。您需要设置white-space: nowrap;才能让它真正发挥作用。

这是div.items的完整CSS（这是我为了在测试中使用它而改变的全部内容）：

div.items {
  display: inline-block;
  z-index: 100;
  width: 90%;
  overflow-x: scroll;
  white-space: nowrap;
}