title: CSS inline-block not working in slider list
body: <p>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.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="slider-small-box sone slider-box"&gt;
      &lt;ul&gt;
          &lt;li&gt;
              &lt;img src="spacer.gif" class="slider-img"&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;img src="spacer2.gif" class="slider-img"&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.slider-box {
  overflow: hidden;
  }
  .slider-box ul {
  padding: 0px;
  margin: 0px;
  }
  .slider-box &gt; ul &gt; li {
  display: inline-block;
  border-radius: 5px;
  }
  .slider-small-box &gt; ul &gt; li &gt; img {
  width: 270px;
  height: 200px;
  background-color: #333333;
  border-radius: 5px;
  }
  </code></pre>
  
  <p>Here's a jsfiddle showing all the slider divs and their respective css classes: <a href="http://jsfiddle.net/JeVm3/" rel="nofollow">http://jsfiddle.net/JeVm3/</a></p>
  
  <p>EDIT:</p>
  
  <p>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.</p>
  
  <p>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.</p>