cuộn ngang của phần tử chặn nội tuyến

Question

Tôi có các div chặn nội dòng khi chúng đến cuối màn hình, chúng chuyển sang dòng tiếp theo thay vì cuộn theo chiều ngang, ai đó có thể giúp tôi không? đây là một 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

Sử dụng white-space: nowrap; trên dx lớp.

Fiddle

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

Answer 2

Ẩn tràn y và sử dụng nowrap

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

FIDDLE