Question

我正在尝试制作一个旋转木马类型控件，允许用户选择多个div元素之一的单选按钮。这个想法是有20个左右的150px 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在点击锚点时向左或向右移动.item。应该如何设置.scheduler-inner的样式？我有

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

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

Answer 1

您需要的不是浮动，而是风格white-space: nowrap;

将nowrap应用于您的容器，并将您的项目设置为内联显示。请参阅下面的jsfiddle。

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

如何保持漂浮的儿童div包装？

1 个答案: