lists are shown as blocks instead of inline-block

I have a <ul id="slide-holder"> which contains several <li class="slide">.

css:

#slide-holder{
    position:absolute;
    width: 720px开发者_高级运维;
    height: 540px;
    background-color:#FFF;
    display: block;
    list-style:none;
}
.slide{
    width:720px;
    height:540px;
    display:inline-block;
    list-style:none;
}

html:

<ul id="slide-holder">
    <li class="slide"></li>
    <li class="slide"></li>
    <li class="slide"></li>
</ul>

The problem is that instead of having each <li> element next to each other with a huge horizontal scroll bar being displayed, everything is displayed as a block i.e. vertical scroll bar is shown.

I was wondering if the window has a maximum limit of width that cannot exceed or if it is just a minor css issue?

Try to float your lis:

.slide{
    float:left;
    width:200px;
    height:540px;
    list-style:none;
}

ul .slide:last-child {
    clear:both;
}

This is a css property and not an issue. The overflow will by default be wrapped, thus rendered on a new line. This is expected behavior, as you want your text (inside a <p> tag for example) to be rendered on new lines, when they reach the right edge of its parent.

This is default for all elements, so to remove the wrapping, you need to change the white-space property in your css:

ul{ white-space: nowrap; }

An example of non-default wrapping is seen in notepad. You need to select "wrap text", if you want to get rid of horizontal scrollbars.

jsFiddle here