在进行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. 安卓中运行报错Error:Execution failed for task ':app:transformClassesWithDexForDebug'解决

    在androidstuio中运行我的未完项目,报错: Error:Execution failed for task ':app:transformClassesWithDexForDebug'.&g ...

  2. JMeter分布式负载测试（吞吐量控制器）

    在本节中,我们将学习如何使用吞吐量控制器在JMeter中创建分布式负载测试计划. 出于测试目的,我们将在我们网站 www.yiibai.com 的URL下的某些网页上创建分布式负载.这些网页包括: 主 ...

  3. Visio图表应用

    两种方式创建 插入图表之后通过设计面板的更改图表类型进行更改 双击图表进入编辑状态. 组合其中组合图的利用 下面是图表编辑操作: 双击进入图表之后下方会有“Chart1”跟“Sheet1”两个板块 而 ...

  4. k8s集群---apiserver，controller-manager,scheduler部署

    #证书自签名脚本 root@k8s-master: ~/k8s/k8s-cert :: $ cat k8s-cert.sh cat > ca-config.json <<EOF { ...

  5. 20191031-6beta week 1/2 Scrum立会报告+燃尽图 04

    此作业要求参见https://edu.cnblogs.com/campus/nenu/2019fall/homework/9914 git地址:https://e.coding.net/Eustia/ ...

  6. 【学习笔鸡】快速沃尔什变换FWT

    [学习笔鸡]快速沃尔什变换FWT OR的FWT 快速解决: \[ C[i]=\sum_{j|k=i} A[j]B[k] \] FWT使得我们 \[ FWT(C)=FWT(A)*FWT(B) \] 其中 ...

  7. Windows服务器管理--批量管理工具

    iis7批量远程控制: 一款电脑远程监控的工具,IIS7远程桌面管理是一款专业的远程桌面连接软件,无需安装.操作简单方便.完美的界面设计.强大的监控功能.稳定的系统平台,满足了用户实现远程桌面连接的需 ...

  8. 边框，元素居中，盒子模型，margin,display,overflow,textarea,float,浮动停止条件，清除浮动影响，margin-top的bug，清除默认样式

    边框 solid实线 dotted虚线 dashed点线 盒子在页面中实际的宽高都是5部分组成 宽=borderleft+paddingleft+width+paddingright+borderri ...

  9. 1053 住房空置率 (20 分)C语言

    在不打扰居民的前提下,统计住房空置率的一种方法是根据每户用电量的连续变化规律进行判断.判断方法如下: 在观察期内,若存在超过一半的日子用电量低于某给定的阈值 e,则该住房为"可能空置&quo ...

  10. 腾讯自研万亿级消息中间件TubeMQ为什么要捐赠给Apache？

    导语 | 近日,云+社区技术沙龙“腾讯开源技术”圆满落幕.本次沙龙邀请了多位腾讯技术专家围绕腾讯开源与各位开发者进行探讨,深度揭秘了腾讯开源项目TencentOS tiny.TubeMQ.Kona J ...