html – CSS white-space nowrap无法正常工作

发布时间：2020-12-14 23:52:07 所属栏目：资源来源：网络整理

导读：我有一个div,有几个子div,左边是浮动的.我不希望它们中断,所以我将它们设置为显示：inline-block和white-space：nowrap.遗憾的是一切都没有发生.他们只是一直在打破. 最后我想在x方向滚动,但是当我添加overflow-x：scroll; overflow-y：可见它在y方向滚动. .

我有一个div,有几个子div,左边是浮动的.我不希望它们中断,所以我将它们设置为显示：inline-block和white-space：nowrap.遗憾的是一切都没有发生.他们只是一直在打破.

最后我想在x方向滚动,但是当我添加overflow-x：scroll; overflow-y：可见它在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

解决方法

我可能不完全理解你的问题,但如果你删除它似乎divs / scroll表现：float：left;来自.b并添加：overflow：auto;到.a

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!