html - CSS only - how to have a scrolling ul with all li on one line -

i have div fixed width. inside ul. ul has random amount of li children, varying widths.

i use bootstrap.

here example:

<div class="parent">     <div class="child">             <ul id="inner" class="nav nav-tabs">             <li>test</li>             <li>test</li>             <li>test</li>             <li>test</li>             <li>test</li>         </ul>              </div>   </div>  <div class="parent">        <div class="child">                 <ul id="inner-new" class="nav nav-tabs">             <li>test</li>             <li>test</li>             <li>test</li>             <li>test</li>             <li>test</li>         </ul>             </div>  </div>  <style> .parent {     background: green;     width: 200px;     padding: 20px;     overflow: hidden;     display: inline-block; }  .child {     background: white;     padding: 10px;     overflow: auto; }  li {     padding: 30px; }  #inner {     background: yellow;     padding: 10px;     width: 500px; }  #inner-new {     background: yellow;     padding: 10px;     width: auto; } </style> 

here fiddle above code:

http://jsfiddle.net/4dvkbtpg/2/

is there way have li's in 1 row (like in first example) without giving ul fixed width? since don't know how many li's there or width of them be, can't add use fixed widths. can use css this.

i tried various things float:left , different display styles, couldn't figure out. know of way accomplish this?

here little picture, make clearer (hopefully!) http://i.imgur.com/qz9eud2.png

please check demo

.parent1{ width:100%; } 

then please check demo

if understand think want another demo

according image final demo