Flex版本

.super {
display: flex;
width: 100%;
overflow-x: scroll;
white-space: nowrap;
}
.sub {
width: 200px;
height: 50px;
flex-basis: 200px; 子容器基准大小
flex-shrink: 0; 表示在不伸缩的情况下子容器的原始尺寸
}

常规版本

.super {
width: 100%;
overflow-x: scroll;
white-space: nowrap;
}
.sub {
display: inline-block;
width: 200px;
height: 50px;
}

CSS横向滚动的更多相关文章

  1. 使用elementUI滚动条之横向滚动

    用过elementUI组件应该会知道它内置一个滚动效果,官网对此组件没有相关文档,也是细心网友发现的. <el-scrollbar></el-scrollbar> 将会出现滚动 ...

  2. 利用overflow-x实现横向滚动的xiaoguo

    在进行app开发中经常遇到横向滚动的效果,相信很多人都是用js写的吧,其实用css的overflow-x也可以写出啦哦~~~ (1)介绍overflow-x: 1)浏览器支持 所有主流浏览器都支持 o ...

  3. swiper3d横向滚动多张炫酷切换banner

    最近有了个新需求,swiper3d横向滚动多张炫酷切换banner要和elementUI里边走马灯的卡片化card 类似,但是还需要h5手机触摸滚动啊啊啊啊,昨天折腾了半个早上总算完成,今天乖乖跑来m ...

  4. 微信小程序scroll-view横向滚动

    官方文档给的代码复制下来发现无法滚动,没反应,使用css设置浮动属性也无效 官方没有给出css代码,横向需要设置两个css属性才行: white-space: nowrap; ----规定段落中的文本 ...

  5. html5 tab横向滚动,无滚动条(transform:translate)

    html5 横向滚动,用到了 touchstart.touchmove.touchend 控制修改transform:translate属性;[手机端或者浏览器模拟手机模式才有效果] [转载请注明出处 ...

  6. jQuery实现文字横向滚动效果

    HTML代码: <div id="aaa" style="width:100px; position:relative; white-space:nowrap; o ...

  7. JS浏览器滚轮事件实现横向滚动照片展

    if(window.attachEvent){ ///*IE8注册事件*/ this.oc.attachEvent('onmousewheel',function(e) { //函数体 }); } e ...

  8. 【CSS3】精美横向滚动菜单按钮

    废话不多说,直接上图: 然后是代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  9. css横向导航条

    css横向导航条有两种方法 1. ul li a li{float:left} #navlist li, #navlist a{height:44px;display:block;} a{width: ...

  10. 【吉光片羽】js横向滚动与浮动导航

    1.横向滚动,这个方法是见过最简洁的了. #demo { background: #FFF; overflow: hidden; border: 1px dashed #CCC; width: 117 ...

随机推荐

  1. XLSReadWriteII5的使用示例

    procedure TForm1.Button1Click(Sender: TObject); var i, n: Integer; XLS: TXLSReadWriteII5; // 引用XLSRe ...

  2. 个人数据保全计划:部署joplin server笔记同步服务

    前言 在这个数据爆炸的时代,个人数据的价值愈发凸显,成为我们生活与工作中无可替代的重要资产.上一篇文章里,我介绍了从印象笔记迁移至 Joplin 的过程,这是我寻求数据自主掌控的关键一步.在探索同步方 ...

  3. 云主机(操作系统:CentOS7版本)安装nfs客户端,挂载文件系统

    本文分享自天翼云开发者社区<云主机(操作系统:CentOS7版本)安装nfs客户端,挂载文件系统>,作者:c****n 1.保证宿主机上有nfs-utils 1.1若宿主机yum源不可以用 ...

  4. 国产AI生态新突破!“息壤”+DeepSeek王炸组合来了!

    2025,国产AI火力全开! 天翼云"息壤"深度适配DeepSeek-R1/V3 实现"国产模型+国产算力+国产云服务" 全产业链闭环 打造国产AI新高度 助力 ...

  5. .NET最佳实践:避免滥用Task.Run

    在 C# 中,Task.Run 是用来在后台线程中执行异步任务的一个常见方法. 它非常适用于需要并行处理的场景,但如果不加以谨慎使用,可能会导致额外的线程池调度,进而影响程序的性能. 什么是线程池? ...

  6. FLink14--核心窗口--TumblingWindiwApp

    一.依赖 https://www.cnblogs.com/robots2/p/16048648.html 二. 代码 前言:window用作有keyBy情况,前面没有使用keyBy的话用windowA ...

  7. 最长不降子序列 n log n 方案输出与 Dilworth 定理 - 动态规划模板

    朴素算法 不必多说,\(O(n^2)\) 的暴力 dp 转移. 优化算法 时间为 \(O(n \log n)\) ,本质是贪心,不是 dp . 思路是维护一个单调栈(手写版),使这个栈单调不降. 当该 ...

  8. 【译】HTTP 文件更新了请求变量

    许多用户都要求在 Visual Studio 的 HTTP 文件中添加对请求变量的支持.使用请求变量,您可以发送 HTTP 请求,然后在从 HTTP 文件发送的任何后续请求中使用响应或请求中的数据.我 ...

  9. thymeleaf 使用th:onclick传递参数问题:

    使用方法:注意:传递参数时如果参数是数字这样写没有问题,但是如果参数是字符串onclick的方法将无法接收到参数并报错,所以参数是字符串时要加单引号.如上图.

  10. Python - [04] 面试题汇总

    题记部分 001 || Python的特点和优点 Python可以作为编程的入门语言,因为他具有以下特质: (1)解释型 (2)动态特性 (3)面向对象 (4)语法简洁 (5)开源 (6)丰富的社区资 ...