Question

我在以下标记的codepen.io上创建了example：

<div class="outer">
  <div class="inner">Inner 1</div>
  <div class="inner">Inner 2</div>
  <div class="inner">Inner 3</div>
</div>

和css：

.outer {
  border: 1pt solid black;
  width:320pt;
  height: 220pt;
  overflow-x: scroll;
  overflow-y: hidden;
  flex-wrap:nowrap;
}

.inner {
  border: 1pt solid blue;
  display:inline-block;
  width: 200pt;
  height: 200pt;
  background: silver;  
}

但我的目标是创建一种旋转木马，其中外部div的内容不会包裹。这是如何完成的？

Answer 1

将white-space: nowrap添加到外部div以防止换行。另外，添加overflow: hidden以隐藏滚动条。

http://codepen.io/anon/pen/wciLg

对于轮播，您可能需要添加包含所有元素的额外容器div。然后，您可以通过在内部容器上设置left或margin-left来滚动轮播。但那些只是我的想法，你可能有更好的主意。

Answer 2

或者你可以添加一个额外的div并移动它。见http://codepen.io/anon/pen/zvFxl

   .innercontainer{  width:620pt; }

如何使div的内容不包装？

2 个答案: