1

我正在尝试自己为我正在设计的网页实现一个响应式轮播。我遇到了一些问题，用一些截图来说明可能会容易上千倍，所以这里是：

在此处输入图像描述

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

箭头分别向左和向右浮动，项目只是容器inline-block内的 div div.items，其宽度为 90%（和 overflow-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

4

1 回答 1

1

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

编辑：经过更多测试，事实证明设置高度实际上对此没有任何影响。您需要进行设置white-space: nowrap;以使其实际工作。

这是完整的CSS div.items（这是我为了让它在我的测试中工作而改变的）：

div.items {
  display: inline-block;
  z-index: 100;
  width: 90%;
  overflow-x: scroll;
  white-space: nowrap;
}
于 2013-04-07T19:31:35.240 回答