Bullets added dynamically to a list wrap down despite display:inline

I've been trying to implement an infinite scrolling gallery using a vertical list.

For some odd reason the new bullets were being wrapped below despite using display:inline in the style sheet. Using white-space:nowrap didn't help. I finally had to switch to images only.

Any ideas on why this is happening?

<div id="wrapper">
    <ul id="slides">
            <li id="randomPick"><img src="http://www.domain.com/images/blah/filename.jpg" height="120" class="image"/></li>
    </ul>
</div>

li {
    list-style: none;
    display: inline;
   /* float:left; */
}

#wrapper {
    position: relative;
    overflow: scroll;
    width: 600px;
    height: 150px;
    left: 21px;
    top: 5px;
    overflow-y: hidden;
   /* width:auto */
    white-space:nowrap;
}

#slides {
    position: absolute;
}

#slides li {
    float: left;
    height: 140px;
    /* width: 200px; */
    padding-left:5px;
}

$("#wrapper").scroll(function () {
                    var right = $(".randomPick:last").offset().left + $(".randomPick:last").outerWidth();
                    if( right < 1000 ){
                        // Test
                        $("#wrapper ul").append("<li class="randomPick"><img src='http://www.domain.com/images/blah/fi开发者_Python百科lename.jpg' height='120' class='image'/></li>");
                    }
                }
            );

You need to increase the width of your ul tag to force the scroll horizontally. You could set it to an arbitrarily high number, but that would cause the scroll to be there even when content does not overflow.

If you know the exact width of each li, you can increase the width by the li width (and some padding space if you so desire) programmatically using jQuery to change the width css attribute on each add/delete.

If the width of the li is dynamic, you can get its width height with the clientWidth and clientHeight DOM properties.