如何防止浮动的子div包裹起来？

Question

I'm trying to make a carousel type control that allows a user to pick radio button that's within one of many div elements. The idea is to have 20 or so 150px divs that contain radio buttons. I don't want those 20 divs to wrap once they reach the right side of the container. I tried setting the container overflow to hidden but that didn't work. The basic html layout is

<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>

I'm really just looking for some CSS guidance. I don't want to have a scroll bar on .scheduler-inner and I will use javascript to move the .item left or right on the click of the anchors. How should .scheduler-inner be styled? I have

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

but they wrap as soon as it hits the edge of .scheduler-inner .

Answer 1

What you need isn't floating but the style white-space: nowrap;

Apply the nowrap on your container and set your items to display inline. Refer to the jsfiddle below.

Here is a jsfiddle: http://jsfiddle.net/of5dmjux/