html - 如何防止 float 的子 div 换行？

Question

我正在尝试制作一个旋转木马类型的控件，允许用户选择多个 div 元素之一中的单选按钮。这个想法是有 20 个左右 150 像素的包含单选按钮的 div。我不希望这 20 个 div 在到达容器的右侧后换行。我尝试将容器溢出设置为隐藏，但这没有用。基本的html布局是

<div class="scheduler">
  <div class="scheduler-inner">
        <div class="item">...</div>
        <div class="item">...</div>
        <div class="item">...</div>
        <div class="item">...</div>
        ...<div class="item">...</div>
  </div>
  <a class="scheduler">...</a>
  <a class="scheduler">...</a>
</div>

我真的只是在寻找一些 CSS 指南。我不想在 .scheduler-inner 上有滚动条，我将使用 javascript 在单击 anchor 时向左或向右移动 .item。 .scheduler-inner 应该如何设置样式？我有

.scheduler-inner { overflow:hidden; }
.scheduler-inner > div { float:left; width:10em; } 

但是一旦到达 .scheduler-inner 的边缘，它们就会换行。

Answer 1

你需要的不是 float 而是样式 white-space: nowrap;

在您的容器上应用 nowrap 并将您的元素设置为内联显示。请引用下面的 jsfiddle。

这是一个 jsfiddle:http://jsfiddle.net/of5dmjux/