title: Make list always display one line of elements in a fixed width div
body: <p>I am struggling to make a list always display elements on 1 line only. </p>
  
  <p>To understand this better let me first show some code:</p>
  
  <p>html structure is this:</p>
  
  <pre><code>&lt;div id="tab-content"&gt;
   &lt;div id="part-list"&gt;
      &lt;ul&gt;
             &lt;li&gt;&lt;/li&gt;
             &lt;li&gt;&lt;/li&gt;
             &lt;li&gt;&lt;/li&gt;
             &lt;li&gt;&lt;/li&gt;
             &lt;li&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS style is this:</p>
  
  <pre><code>#tab-content{
                      overflow: auto;
                      height: 100%;
                      position:relative;
                      background-color: #373837;
                      color: white;
                      padding-left:20px;
                      padding-right:20px;
            }
  
  #tab-content ul{
                      display: block;
                      list-style: none outside none;
                     overflow: auto;
                     white-space: nowrap;
  
            }
            #tab-content ul li{
                      display: block;
                      float: left;
                      padding: 7px;
                      margin-right: 4px;
                      font-style: italic;
                      color: #cccccc;
            }
  </code></pre>
  
  <p>I need the ul to have its items on 1 line no matter if it gets bigger than the containing div. If it does get bigger than the scrolling bar should appear. Right now it just gets wrapped..</p>
  
  <p>I am using jscrollPane on #part-list because i have a custom scrollbar there.</p>
  
  <p>PS: specifying a bigger width than the containing div, say 150%, is not a solution as the list has its content pulled out from a db and its length is dynamic.</p>