horizontale Rolle von Inline-Block-Element

Question

Ich habe Inline-Block divs aber wenn sie das Ende des Bildschirms erreichen, gehen sie die nächste Zeile, anstatt horizontal zu scrollen, kann mir jemand helfen? hier ist ein fiddle

<div class="m_wrap"> 
<div class="dx"> 
    <div class="xc">1</div> 
    <div class="xc">2</div> 
    <div class="xc">3</div> 
    <div class="xc">4</div> 
    <div class="xc">5</div> 
    <div class="xc">6</div> 
    <div class="xc">7</div> 
    <div class="xc">8</div> 
    <div class="xc">9</div> 
    <div class="xc">10</div> 

    </div> 
    </div> 

css

.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; 
} 

Answer 1

Verwenden white-space: nowrap; auf dx Klasse.

Fiddle

.dx{ 
    width:100%; 
    height:100px; 
    overflow:scroll; 
    white-space: nowrap; 
} 

Answer 2

Ausblenden der y-Überlauf und verwenden nowrap

.dx { 
    height: 100px; 
    overflow-y: hidden; 
    white-space: nowrap; 
    width: 100%; 
} 

FIDDLE