在进行app制作时，需要使用横向滚动条是内容展示更完善

首先，这是html代码：

这是CSS代码：

要点：

  1. 设置显示内容的宽
  2. white-space是防止内容自动折行
  3. overflow-y设置为hidden，否则会出现上下滚动条
  4. ::-webkit-scrollbar可以设置滚动条样式，display：none，去掉滚动条

效果：

用CSS实现横向滚动条的更多相关文章

  1. 纯css 实现横向滚动条--移动端

    * { margin:0; padding:0; } li { list-style:none; } .box1 { width:320px; height:60px; overflow:hidden ...

  2. css 横向滚动条webkit-scrollbar

    最近遇到一个横向滚动条的问题: 官网链接: https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-scrollbar 这个 ::-web ...

  3. jquery横向滚动条

    此代码献给wendy 由于工作太忙,下次再整理成插件调用,先记录下来,欢迎同学们提意见. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr ...

  4. 逆天的IE7中，诡异的横向滚动条

    今天老邹我又要吐槽IE7了,这个奇葩浏览器总是不让省心.这回遇到的问题,灰常难发现是怎么回事,不过还是让我发现原因,哈哈,只要原因去干掉这个问题比躲避问题用别的办法绕开要爽的多啊. 首先我还是介绍下, ...

  5. CSS定义网页滚动条

    (一)滚动条样式主要涉及到如下CSS属性: overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容overflow: auto; 在需要时内容会自动添加滚动条overflow ...

  6. CSS美化页面滚动条

    文章来自:http://www.webhek.com/scrollbar 本文将会告诉你如何用CSS修改/美化浏览器页面上出现的滚动条.改变它们的颜色,调整它们的外形,适配你对页面UI设计.我们首先将 ...

  7. sub,dl,dt,排版,横向滚动条,浮动元素居中，box-sizing

    1.sub标签 下标 2.dl,dt,dd用的地方通常是具有标题,而标题下对应有若干列表简单的(栏目标题+对应标题列表)和标题对应下面有内容.在使用时候我们能简洁html代码情况下,学会灵活使用dl ...

  8. flex布局下el-table横向滚动条失效

    如下图,是一种常见的页面结构,我们可以有很多方法实现,inline-block,float,flex等等 但是,最近项目中遇到一个怪事,左边是侧边栏导航,右边是一个数据展示table,el-table ...

  9. IE6下出现横向滚动条问题的解决方案

    当我们在css样式设置为html {overflow-y:auto;}时,在ie7以上版本应用时不会有问题,可是在ie6下就会发现垂直滚动条出现会引起横向滚动条出现.究其原因是在ie6下,当内容过多出 ...

随机推荐

  1. 阿里云 CentOS8 Repo

    # CentOS-Base.repo # # The mirror system uses the connecting IP address of the client and the # upda ...

  2. spring boot 多数据源加载原理

    git代码:https://gitee.com/wwj912790488/multiple-data-sources DynamicDataSourceAspect切面 必须定义@Order(-10) ...

  3. Android生命周期函数执行顺序

    转载自:http://blog.csdn.net/intheair100/article/details/39061473 程序正常启动:onCreate()->onStart()->on ...

  4. KEIL5.11安装小结

    一.注意点 1.安装路径不能带中文,必须是英文路径 2.安装目录不能跟 51 的 KEIL 或者 KEIL4 冲突,三者目录必须分开 3.KEIL5 不像 KEIL4 那样自带了很多厂商的 MCU 型 ...

  5. VRChat之blender教程

    推荐先看:VRChat模型制作及上传总篇(包含总流程和所需插件):https://www.cnblogs.com/raitorei/p/12015876.html 0.设置中文,安装cat插件 注意  ...

  6. [DevExpress]treeList1背景色设置与自定义图标

    为了和系统界面一致改成透明色: treeList1.BackColor = Color.Transparent; treeList1.Appearance.Empty.BackColor = Colo ...

  7. 关于在vuejs中动态加载不确定数量和内容的组件的解决方案

    在做一个门户项目的时候,客户要求需要进行私人化定制,每个人进入首页的时候可以自定义首页显示的版块 要在4.50个组件中显示随机N个组件按照每个人选定的顺序排列.需求说完了,接下来说说解决方案: htm ...

  8. 换根DP（二次扫描）

    参考来自这里: https://blog.csdn.net/qq_41286356/article/details/94554729 题目在这里 https://ac.nowcoder.com/acm ...

  9. 【题解】Leyni的汽车比赛

    [题解]Leyni的汽车比赛 HRBUST - 1404 思维题?居然被我凑出来了 这种图论题先设这样一个状态 \[ ans(i,j,f) \] 表示从i到j,最多使用f个交通工具的最短路 转移的话, ...

  10. $UVA10559\ Blocks\ $区间$dp$

    \(Des\) • 有一排数量为N的方块,每次可以把连续的相同颜色的区间消除,得到分数为 区间长度的平方,然后左右两边连在一起,问最大分数为多少. • n<=1 \(Sol\) 正解状态设得奇奇 ...