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不工作

回答

相关问题