title: horizontal scroll of inline-block element
body: <p>I have inline-block divs however when they reach end of the screen, they go the next line instead of scrolling horizontally, can someone help me out?
  here is a <a href="http://jsfiddle.net/krV27/" rel="noreferrer">fiddle</a></p>
  
  <pre><code>&lt;div class="m_wrap"&gt;
  &lt;div class="dx"&gt;
      &lt;div class="xc"&gt;1&lt;/div&gt;
      &lt;div class="xc"&gt;2&lt;/div&gt;
      &lt;div class="xc"&gt;3&lt;/div&gt;
      &lt;div class="xc"&gt;4&lt;/div&gt;
      &lt;div class="xc"&gt;5&lt;/div&gt;
      &lt;div class="xc"&gt;6&lt;/div&gt;
      &lt;div class="xc"&gt;7&lt;/div&gt;
      &lt;div class="xc"&gt;8&lt;/div&gt;
      &lt;div class="xc"&gt;9&lt;/div&gt;
      &lt;div class="xc"&gt;10&lt;/div&gt;
  
     &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>.m_wrap{
  width:100%;
  height:100px;
  }
  .dx{
     width:100%;
  height:100px;
  overflow:scroll;
  }
  .xc{
  display:inline-block;
  width:100px;
  height:80px;
  border:1px solid;
  line-height:80px;
  text-align:center;
  margin-bottom:4px;
   }
  </code></pre>