CSSの空白が無効になっています

Question

私はdivをいくつか持っていて、左に浮いています。私はそれらが壊れないようにするため、私はそれらをdisplay:inline-blockとwhite-space:nowrapに設定しました。残念ながら、何も起こりません。彼らはただ破滅を続けます。

最後にx方向にスクロールしたいのですが、overflow-x:scroll; overflow-y:visibleを追加すると、y方向にスクロールします。

.a { 
    width: 400px; 
    height: 300px; 
    white-space: nowrap; 
    display: inline-block; 
} 
.b { 
    float: left; 
    width: 50px; 
    height: 200px; 
    display: inline-block; 
} 

<div class="a"> 
    <div class="b"></div> 
    <div class="b"></div> 
    <div class="b"></div> 
    <div class="clearfix"></div> 
</div> 

あなたは

Answer 1

私は完全にあなたの質問を理解しないかもしれないが、それはdivのように思える/振る舞うスクロールoverflow:auto;

Answer 2

my complete implementation on JSFiddleはこれが何をしたいあなたを与えるん見ることができますか？オーバーフロースクロールを追加しました。 .bからfloat: left;をし、追加します：あなたが削除する場合

* { 
    margin: 0px; 
    padding: 0px; 
} 
html, body { 
    height: 100%; 
    background-color: #EEEEEE; 
} 
.a { 
    width: 400px; 
    height: 300px; 
    white-space: nowrap; 
    overflow:scroll;   /* Added this line*/ 
    background-color: lightcoral; 
    -webkit-box-sizing:border-box; 
} 
.b { 
    width: 50px; 
    height: 200px; 
    margin-top: 50px; 
    margin-left: 15px; 
    display: inline-block; 
    background-color: lightgreen; 
    -webkit-box-sizing:border-box; 
} 
.clearfix { 
    float: none; 
    clear: both; 
} 

Answer 3

.aしないように注意してくださいあなたが何を意味するかが、あなたが停止した場合あなたのBをfloading、そしてあなたのオーバーフローを与える：

参照自動車はそれが動作するはずです：あなたは、ラッパーのdivにclearfixを置く通常