html - 如何让div的内容不换行？

Question

我创建了一个 example在以下标记的 codepen.io 上:

<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 来滚动轮播。但这些只是我的想法，您可能有更好的主意。