CSS白色空間nowrap不工作

我有一個div與幾個向左浮動的子div。我不想讓它們突破，所以我將它們設置爲display:inline-block和white-space:nowrap。不幸的是沒有任何反應。他們只是繼續打破。CSS白色空間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>

你可以看到my complete implementation on JSFiddle

來源

2014-01-16 Julian F. Weinert

通常你會放在clearfix在包裝DIV - 例如，如果使用Nicholas Gallagher的新版micro clearfix hack。 – Ruskin

澄清。你想要紅色的.a塊在底部有一個滾動條，當有太多的.b塊可以放入內部時？ – Ruskin

@Ruskin：我在我的小提琴中有一個clearfix，但它沒有幫助。 –

我可能沒有完全理解你的問題，但它似乎像的div /滾動，如果你刪除的行爲overflow:auto;到.a

來源

2014-01-16 15:03:19 Craighead

謝謝！我把'.b'改爲'display：inline-block'，並沒有想到這個事實，即內聯塊不會中斷... :) –

這是否給你想要的是什麼？增加了溢出滾動。從.bfloat: 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; 
}

來源

2014-01-16 15:01:24 Ruskin

不知道你的意思，但如果你停止floading你b，並給您一個溢出：汽車它應該工作

見：/jsfiddle.net/88yjz/3/

來源

2014-01-16 15:09:41 user3004410

謝謝，Craighead有相同的修復。當我將'.b'從'display：block'改爲'display：inline-block;'時，我沒有想到這樣的事實：內聯塊不會換行。 –

CSS白色空間nowrap不工作

回答

相關問題