css - Display blocks in line with scroll -

css - Display blocks in line with scroll -

i have folowing code:

html:

<div class="container"> <div class="content"> <ul> <li class="item">a</li> <li class="item">bb</li> <li class="item">ccc</li> <li class="item">dddd</li> <li class="item">eeeee</li> </ul> </div> </div>

css:

.container{ width: 200px; background-color: red; overflow: hidden; } .content ul{ padding: 0px; margin: 0px; } .item{ padding: 1px 10px 1px 10px; background-color: green; border: 1px black solid; margin: 1px; display: inline-block; }

http://jsfiddle.net/vsfhs/183/

and need display items in 1 row scrollable overflow. number of items dynamic, can't preset width of content.

here go. http://jsfiddle.net/vsfhs/184/

the solution white-space: nowrap

css layout