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. Jetpack架构组件学习(6)——使用Glance实现桌面小组件

    原文地址: Jetpack架构组件学习(6)--使用Glance实现桌面小组件-Stars-One的杂货小窝 公司陆续整了几个Compose写的app,有个小组件的功能,顺便试了下Jetpack库里的 ...

  2. day05-面向对象编程:基础语法

    Java面向对象:类的基础语法 [ 任务列表 ] 1.面向对象快速入门 2.什么是面向对象 3.类的基础语法--构造器 4.类的基础语法--this关键字 5.类的基础语法--封装 6.类的基础语法- ...

  3. 对比使用DeepSeek与文新一言,了解DeepSeek的关键技术论文

    DeepSeek是国内大模型技术的新秀,最近也在业界和媒体界火爆出圈,所以想学习一下其技术. 大模型时代,学习知识,当然首先想到利用大模型,由于在过去一年,对DeepSeek使用不多,所以想和文新一言 ...

  4. 【忍者算法】从风扇叶片到数组轮转:探索轮转数组问题|LeetCode 189 轮转数组

    从风扇叶片到数组轮转:探索轮转数组问题 生活中的算法 想象你在看一个风扇缓缓转动,每次转动三个叶片的距离.原本在上方的叶片转到了右侧,原本在右侧的叶片转到了下方...这就是一个生动的轮转过程.再比如, ...

  5. Hetao P1031 萌萌题 题解 [ 蓝 ] [ 线性 dp ]

    萌萌题:一道结合了观察性质的线性 dp. 观察 我们先考虑极端情况:所有数相同,所有数降序排列两种情况. 对于所有数相同的情况,我们发现,最终可以合并出来的区间,最多只有 \(n \log n\) 个 ...

  6. QT5笔记:34. 视口和窗口

    ![image-20220504160327597](QT5 使用.assets/image-20220504160327597.png) 例子: void Widget::paintEvent(QP ...

  7. 赛博朋克2077/Cyberpunk 2077 v2.1|整合DLC|容量96.9GB|官方简体中文

    <赛博朋克2077>是知名<巫师>系列开发商CD PROJEKT RED公布的一款角色扮演游戏,故事设定在黑暗的.科技极度发达的腐败未来世界中,并且兼有沙盒元素与RPG机制.游 ...

  8. Linux - Linux终端里的二维码

    qrencode:Linux 操作系统中生成二维码,点此进入下载页面 1.将tar包上传到 Linux 服务器上并解压:tar -zxvf qrencode-x.x.x.tar.gz 2.在 .bas ...

  9. SuperSocket 服务端 和 SuperSocket.ClientEngine 客户端及普通客户端

    internal class Program { //static void Main(string[] args) //{ // byte[] arr = new byte[1024]; // 1. ...

  10. 【MATLAB习题】铰链四杆机构的运动学分析

    铰链四杆机构题目&已知数据 matlab 代码 主程序文件: function main %输入已知数据 clear; i1=101.6; i2=254; i3=177.8; i4=304.8 ...