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. 从生活案例理解滑动窗口最大值:一个超直观的思路讲解|LeetCode 239 滑动窗口最大值

    LeetCode 239 滑动窗口最大值 点此看全部题解 LeetCode必刷100题:一份来自面试官的算法地图(题解持续更新中) 更多干货,请关注公众号[忍者算法],回复[刷题清单]获取完整题解目录 ...

  2. 从理房间到移动零:一道考察数组操作的经典题目|LeetCode 283 移动零

    LeetCode 283 移动零 点此看全部题解 LeetCode必刷100题:一份来自面试官的算法地图(题解持续更新中) 生活中的算法 你有没有整理过房间?常常会发现一些要丢掉的东西,但又不想立刻处 ...

  3. 深入剖析Base64加解密中遇到的坑点

    前言 最近开发过程中遇到了关于使用base64加密传输遇到的神奇问题.需求就是用户的id在链接上露出时需要加密处理,于是后端把下发的用户id改成了base64加密处理后下发了,前端只需要把加密后的用户 ...

  4. Luogu P11363 NOIP2024 树的遍历 题解 [ 紫 ] [ 树形 dp ] [ 组合计数 ] [ adhoc ]

    树上遍历:CCF 难得一遇的好题! 参考了洛谷的第一篇题解,所以思路会有点相似. 部分分 当 \(k=1\) 时,显然方案总数为 \(\prod_{i=1}^{n}(d_i-1)!\),因为进入一个子 ...

  5. .Net Core WebAPI部署多服务器配置Nginx负载均衡

    下载Nginx包: https://nginx.org/en/download.html 首先下载Nginx包 注意:下载路径必须为英文,不能到中文: 启动Nginx: 打开刚刚下载的Nginx包,然 ...

  6. 从 Windows Forms 到微服务的经验教训

    Photo by Dan Counsell on Unsplash 如果说软件开发中有什么不变的东西,那就是变化. 在 .NET 生态系统中摸爬滚打的这二十年里,我见证了各种框架的起起落落,目睹了容器 ...

  7. 让 LLM 来评判 | 设计你自己的评估 prompt

    设计你自己的评估 prompt 这是 让 LLM 来评判 系列文章的第三篇,敬请关注系列文章: 基础概念 选择 LLM 评估模型 设计你自己的评估 prompt 评估你的评估结果 奖励模型相关内容 技 ...

  8. 探秘Transformer之(8)--- 位置编码

    探秘Transformer之(8)--- 位置编码 0x00 概述 位置编码(Positional Embedding)是一种用于处理序列数据的技术,被用来表示输入序列中的单词位置.在Transfor ...

  9. ABC393C题解

    大概评级:橙. 送分题. 题意就是让你统计有多少条边是重边或自环. 设 \(u_i\) 表示第 \(i\) 条边的左端点,\(v_i\) 表示第 \(i\) 条边的右端点. 那么如果 \(u_i = ...

  10. python进程 - 调试报错 you are not using fork to start your child processes

    在走这段代码的时候报错了,记录一下我的调试过程,感觉有个思路来走就挺好的. 1.报错与解决 文件名字:ClassifierTest.py import torch import torchvision ...