title: Display horizontal scrollbar and force horizontal overflow in LI elements
body: <p>I have some CSS and HTML that are as follows. There's a javascript code that turns the .tab into a tabbed element of #tab-container. Since #tab-container has fixed width and height if content of .tab exceeds width/height either is becomes hidden or overflows. In the case of UL, I want it to overflow and have scrollbars within the div.tab . Only a horizontal scrollbar should appear. I tried with the code below, but for some reason I can only manage to scroll vertically (LI  fill the width limit, then more rows appear... I want only one row + horizontal scroll). I think I can't really change the two DIVs otherwise the tabs will be broken. I need a solution within the .tab layer.</p>
  
  <p>the HTML:</p>
  
  <pre><code>&lt;div id="tab-container"&gt;
      &lt;div class="tab"&gt;
         &lt;ul&gt;
             &lt;li&gt;&lt;img src="img01.png" width="96" height="96" /&gt;&lt;/li&gt;
             &lt;li&gt;&lt;img src="img02.png" width="96" height="96" /&gt;&lt;/li&gt;
             &lt;li&gt;&lt;img src="img03.png" width="96" height="96" /&gt;&lt;/li&gt;
             &lt;li&gt;&lt;img src="img04.png" width="96" height="96" /&gt;&lt;/li&gt;
         &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>the CSS:</p>
  
  <pre><code>#tab-container { width: 500px; height: 200px; position: relative; overflow: hidden; } 
  .tab { position: relative; overflow: hidden;}
  #tab-container .tab ul { position: absolute; width: auto; display: block; overflow: scroll; }
  #tab-container .tab ul li { display: inline-block; position: relative; }
  </code></pre>