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. P10353 [PA2024] Grupa permutacji 题解

    神秘!在这些排列生成的置换群 \(G\) 里,若 \(\exists \pi \in G\) 使得 \(\pi_i=k,\pi_j=l\),则所有这些 \((k,l)\) 被同样数量的 \(\pi\i ...

  2. Struts2和Spring的区别

    1.Struts2是类级别的拦截, 一个类对应一个request上下文,SpringMVC是方法级别的拦截,一个方法对应一个request上下文,而方法同时又跟一个url对应,所以说从架构本身上Spr ...

  3. DeepSeek提示词工程完全指南:如何用「思维翻译器」激发大模型潜能——附官方提示词和优化案例

    DeepSeek提示词工程完全指南:如何用「思维翻译器」激发大模型潜能--附官方提示词和优化案例 字数:约3000字|预计阅读时间:8分钟 之前写了一篇DeepSeek-R1 技术全景解析:从原理到实 ...

  4. [TJOI2019] 甲苯先生的字符串 题解

    有点水了-- 考虑相邻的不能放在一起,不相邻的可以,那么很容易想到转移方程: \[dp_{i,j}=\sum_{k=0}^{25}dp_{i-1,k}[j,k不相邻] \] 其中 \(dp_{i,j} ...

  5. mysql where条件:某时间字段为今天的sql语句

    1.查询:注册时间为今天的所有用户数: select count(*) from customer where TO_DAYS(createtime) = TO_DAYS(NOW()) 2.获取当前时 ...

  6. DataX - [03] 使用案例

    题记部分 001 || mysql2hdfs (1)查看MySQL被迁移的数据情况 (2)根据需求确定reader为mysqlreader,writer为hdfswriter 查看reader和wri ...

  7. Markdown 编写技巧汇总(二)

    继续上篇汇总 附-上篇汇总,接着做更加高级一点的应用技巧. [1]列表与引言嵌套 两者嵌套,如: > 我是一行文本 > 1. 文本1 > 2. 文本2 > 1. 文本 > ...

  8. 使用 kubeadm 创建高可用 Kubernetes 及外部 etcd 集群

    博客链接:使用 kubeadm 创建高可用 Kubernetes 及外部 etcd 集群 前言 Kubernetes 的官方中文文档内容全面,表达清晰,有大量示例和解析 无论任何情况下都推荐先花几个小 ...

  9. Springboot 全局统一处理异常

    import org.springframework.web.bind.annotation.ControllerAdvice; import org.springframework.web.bind ...

  10. python文件不显示cmd黑窗口,打包py,pyw文件为exe文件

    问题描述:编写的python文件为定时任务,需要长时间运行,但是打开的cmd黑色窗口看起来很不舒服,于是打包为exe文件,隐藏cmd黑色窗口 步骤:1.使用pip install pyinstalle ...