禁用的y滾動設置爲顯示子元素的元素：inline-block的

Question

說我有一個父DIV和一幫孩子的div

<div id="container"> 
    <div class="child">stuff</div> 
    <div class="child">stuff</div> 
    <div class="child">stuff</div> 
    <div class="child">stuff</div> 
    <div class="child">stuff</div> 
    <div class="child">stuff</div> 
    etc. 
</div> 

我怎樣才能得到孩子的div到水平排隊（ inline-block）並禁用overflow-y滾動條，同時強制子div繼續生成左右？

http://jsfiddle.net/cpofvohr/

Answer 1

您需要添加white-space: pre或white-space: nowrap以#container防止纏繞。

Updated Fiddle

var div = document.getElementById("container"); 
 

 
for (i = 1; i < 40; i++) { 
 
    var div2 = document.createElement("div"); 
 
    div2.className = "child"; 
 
    var text = document.createTextNode(i) 
 
    div2.appendChild(text); 
 
    div.appendChild(div2); 
 
}

.child { 
 
    background-color: #D8D8D8; 
 
    height: 375px; 
 
    width: 30px; 
 
    margin: 3px; 
 
    display: inline-block; 
 
} 
 
#container { 
 
    width: auto; 
 
    min-width: 100px; 
 
    max-height: 400px; 
 
    overflow-x: scroll; 
 
    position: relative; 
 
    min-height: 100%; 
 
    white-space: pre; 
 
}

<div id="container"></div>