Question

I am struggling to make a list always display elements on 1 line only.

To understand this better let me first show some code:

html structure is this:

<div id="tab-content">
 <div id="part-list">
    <ul>
           <li></li>
           <li></li>
           <li></li>
           <li></li>
           <li></li>
    </ul>
  </div>
</div>

CSS style is this:

#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;
          }

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..

I am using jscrollPane on #part-list because i have a custom scrollbar there.

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.

Answer 1

Change float:left to display:inline. Live Example: http://jsfiddle.net/LgKsY/

#tab-content ul li{
    display: inline;
    padding: 7px;
    margin-right: 4px;
    font-style: italic;
    color: #cccccc;
}

However in changing it from block to inline your padding/height will seem different. They key here is set a height on the ul of say 30px and then a line-height of the same value i.e. 30px on the li. I have also removed overflow:auto from the ul in this version as it is redundant because the div already does that job. 2nd example: http://jsfiddle.net/LgKsY/1/