问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

css div不换行问题

头像
el_ps_cpt
    32619

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

    css
    阅读 5.1k
    4 个回答
    得票最新
    头像
    wlove
      6.9k3835
      ✓ 已被采纳
      直接看代码吧 再套层盒子
      <!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>
      头像
      追逐者
        110410
          .childrenBox{
    display: flex;
    flex-wrap: nowrap;
  }

        这样即可

        头像
        田尚雨
          2
          新手上路，请多包涵
          .scrollTimeBox {
    overflow-x: scroll;
}
.childrenBox {
    width: max-content;
}
.children {
    float: left;
}

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

          头像
          知名喷子
            6k31731

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

            .scrollBox{
    white-space: nowrap; /* 文字间空白的处理 */
    overflow-x: auto
}
            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题