开发者社区> 问答> 正文

css怎么写 div 显示横向滚动条

类似于这样的结构

<div class="container">
    <div class="box-1"></div>
    <div class="box-2"></div>
    <div class="box-3"></div>
</div>

container宽度是整个屏幕的宽度
box-1宽度是container的20%
box-2宽度是container的80%
box-3宽度是container的20%

开始的时候看不到box-3
拖动container来显示box-3

展开
收起
杨冬芳 2016-06-03 11:57:14 2423 0
1 条回答
写回答
取消 提交回答
  • IT从业

    最终效果可以看看苹果官网用手机打开的顶部滑动菜单,以下是我写的一个演示DEMO

    HTML:

    <div class="container-wrap">
        <div class="container">
            <div class="box-1">hello</div>
            <div class="box-2">hello2</div>
            <div class="box-3">hello3</div>
        </div>
    </div>
    

    CSS:

    .container-wrap {
        width: 100%;
        height: 50px;
        background-color: rgba(0,0,0,0.8);
        white-space: nowrap;
        overflow: hidden;
        overflow-x: scroll; /* 1 */
        -webkit-backface-visibility: hidden;
        -webkit-perspective: 1000;
        -webkit-overflow-scrolling: touch; /* 2 */
        text-align: justify; /* 3 */
        &::-webkit-scrollbar {
            display: none;
        }
    }
    
    .container {
        
    }
    .container > div {
        display: inline-block;
        height: 50px;
        color: #fff;
        text-align: center;
        line-height: 50px;
    }
    .box-1 {
         width: 80%;   
    }
    .box-2 {
         width: 20%;   
    }
    .box-3 {
         width: 20%;   
    }
    2019-07-17 19:26:27
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
零基础CSS入门教程 立即下载
低代码开发师(初级)实战教程 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载