显示div并排浮动左侧不起作用

Question

I want to display div side by side. The inner div is dynamic means I am using knockout binding . so the number of inner div is unknown. I want as the number of div increases a horizontal scroll bar comes. I am using float left property. But instead it display vertically as soon as i give width to the middle div it works but the problem is i dont know the width beforehand

<div style="width:400px;overflow-x:hidden;overflow-y:auto;">
    <div data-bind="foreach:Members">
        <div style="width:100px;float:left;">test</div>
    </div>
</div>

Answer 1

<div style="width:400px;overflow-x:hidden;overflow-y:auto;">
  <div data-bind="foreach:Members" style="white-space:nowrap; overflow:auto">
    <div style="width:100px;display:inline-block;">test</div>
  </div>
</div>

display:inline-block makes sure more than one div can display on the same line

white-space:nowrap forces all the divs to be on one line

overflow:auto enables the scrollbar(s) if needed