Prevent <li> from breaking lines

Question

I have UL, inside a div where I set the width, DIV, UL and LI. I want overflows to scroll if there are any, so I set the overflow to auto. However, I cannot stop LI from crossing the lines when it is too wide. Here is the css I'm using:

/* id of the containing div */
#ul-container {
    width: 325px;
    border-style: solid;
    border-width: 1px;
    border-radius: 4px;
    border-color: #4297d7;
    overflow: auto;
}

           /* this is the id if the ul*/
#selectable {
    width: 300px;
    height: 75px;
}

#selectable .ui-selecting {
    background: #ccc;
}

#selectable .ui-selected {
    background: #4297d7;
}

li {
    list-style: none;
    overflow: auto;
    width: 300px;
    margin-left: -25px;
}

Whether the overflow property in seems to do nothing. When I put it in a div, I get a horizontal scroll whether I need it or not. Any help would be greatly appreciated.

Answer 1

#ul-container{
  white-space: nowrap;
}

white-space: nowrap will not allow children (whether) to jump to a new line.

Live demo here (click).