css div不换行问题_编程技术网-程序员技术内容聚合平台

（在说正事之前，我要推荐一个福利：你还在原价购买阿里云、腾讯云、华为云服务器吗？那太亏啦！来这里，新购、升级、续费都打折，能够为您省60%的钱呢！2核4G企业级云服务器低至69元/年，点击进去看看吧>>>)

页面是这样的

我把里面的div变成了行内块级元素，但是它换行了！！！
我希望他不换行把childrenBox的宽度撑开然后就可以出现横向的滚动条了请问我需要怎么写才能实现呢

###

直接看代码吧再套层盒子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
   <title></title>
</head>
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        width: 100%;
        overflow-x: auto;
    }

    .box .innerbox {
        height: 100px;
        white-space: nowrap;
        font-size: 0;
    }

    .box .innerbox div {
        font-size: 14px;
        box-sizing: border-box;
        white-space: normal;
        word-wrap: break-word;
        word-break: break-all;
        overflow: hidden;
        display: inline-block;
        width: 100px;
        height: 100px;
        border: 10px solid red;
    }
</style>

<body>
    <div class="box">
        <div class="innerbox">

            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</body>

</html>

###

  .childrenBox{
    display: flex;
    flex-wrap: nowrap;
  }

这样即可

###

.scrollTimeBox {
    overflow-x: scroll;
}
.childrenBox {
    width: max-content;
}
.children {
    float: left;
}

以上是添加(或修改)的属性, 可以试一下.

###

不管用inline-block 还是 flex，横向滚动条的核心要义都是父元素内容不换行：

.scrollBox{
    white-space: nowrap; /* 文字间空白的处理 */
    overflow-x: auto
}