CSS inline-block not working in slider list

Question

I'm trying to get the two img elements shown below to display inline so that they can move with the slider, however it won't. Whether I'm missing something small or there is a bigger force at work I'm not sure.

HTML:

<div class="slider-small-box sone slider-box">
    <ul>
        <li>
            <img src="spacer.gif" class="slider-img">
        </li>
        <li>
            <img src="spacer2.gif" class="slider-img">
        </li>
    </ul>
</div>

CSS:

.slider-box {
overflow: hidden;
}
.slider-box ul {
padding: 0px;
margin: 0px;
}
.slider-box > ul > li {
display: inline-block;
border-radius: 5px;
}
.slider-small-box > ul > li > img {
width: 270px;
height: 200px;
background-color: #333333;
border-radius: 5px;
}

Here's a jsfiddle showing all the slider divs and their respective css classes: http://jsfiddle.net/JeVm3/

EDIT:

I feel a bit more explanation is required in regards to the jsfiddle. You see, each of those coloured divs is a viewport for an individual slider, hence why they have a fixed width. Each of those also has "Overflow: hidden" attached to make sure that the elements inside them cannot be seen, and will slide into view.

I am trying to make it so that the div.slider-box > ul > li elements are displayed inline-block out of sight, behind the viewport div.slider-small-box.

Answer 1

In fact that's how inline-block works, if the container's width does not have enough space, it will jump to the next line. So to force the list items on a single line, you have to use white-space like this:

.slider-box ul {
    padding: 0px;
    margin: 0px;
    white-space:nowrap;
}

Answer 2

It seems that your .slider-small-box element doesn't have enough width for the two images. It needs to have at least 540px width at the moment.

.slider-small-box {
  /* was: width: 270px */
  width: 540px;
  height: 200px;
  background-color: #eeeeee;
  display: inline-block;
  bottom: 0px;
  right: 0px;
  font-size: 0px;
  line-height: 0px;
  float: left;
  overflow: hidden;
  -webkit-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.75);
  -moz-box-shadow:    2px 2px 5px 0px rgba(50, 50, 50, 0.75);
  box-shadow:         2px 2px 5px 0px rgba(50, 50, 50, 0.75);
  border-radius: 5px;
}

Here's your updated fiddle: http://jsfiddle.net/JeVm3/1/