在进行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. 编写自己的JDBC框架（转）

    一.元数据介绍 元数据指的是"数据库"."表"."列"的定义信息. 1.1.DataBaseMetaData元数据 Connection.g ...

  2. 关于hibernate5的映射文件和配置文件改变(转)

    转自:https://blog.csdn.net/m0_37840000/article/details/78823716 配置文件: <!DOCTYPE hibernate-configura ...

  3. C++的特殊预处理定义#、##和#@

    c/c++的预处理定义: 一.Stringizing Operator (#) 在c和c++中数字标志符#被赋予了新的意义,即字符串化操作符.其作用是:将宏定义中的传入参数名转换成用一对双引号括起来的 ...

  4. RobotFramework+Appium 升级Appium v1.10.0后，执行click element时报错：InvalidSelectorException: Message: Locator Strategy 'css selector' is not supported for this session，解决办法

    报错信息如下: debug] [35m[XCUITest][39m Connection to WDA timed out[debug] [35m[XCUITest][39m Connection t ...

  5. selenium自动化测试入门 定位frame和iframe中的元素对象

    < frame> <iframe> 标签,浏览器会在标签中打开一个特定的页面窗口(框架),它在本窗口中嵌套进入一个网页,当用selenium定位页面元素的时候会遇到定位不到fr ...

  6. [Oracle]Oracle的闪回归档

    Oracle的闪回归档 场景需求,由于管理数据库的一些核心表,在实施初期会有人为误删除的问题.Oracle 11gR2提供了闪回归档的特性,可以保证不用RMAN来恢复误删除的数据.实践如下: 1.创建 ...

  7. LibreOJ 6277. 数列分块入门 1 题解

    题目链接:https://loj.ac/problem/6277 题目描述 给出一个长为 \(n\) 的数列,以及 \(n\) 个操作,操作涉及区间加法,单点查值. 输入格式 第一行输入一个数字 \( ...

  8. 吴恩达机器学习笔记 - cost function and gradient descent

    一.简介 cost fuction是用来判断机器预算值和实际值得误差,一般来说训练机器学习的目的就是希望将这个cost function减到最小.本文会介绍如何找到这个最小值. 二.线性回归的cost ...

  9. Quartz 和 springboot schedule中的cron表达式关于星期（周几）的不同表示

    一.Quartz中cron 表达式分析: quartz 官方源码(org.quartz.CronExpression)解释: Cron expressions are comprised of 6 r ...

  10. AcWing 220. 最大公约数 | 欧拉函数

    传送门 题目描述 给定整数N,求1<=x,y<=N且GCD(x,y)为素数的数对(x,y)有多少对. GCD(x,y)即求x,y的最大公约数. 输入格式 输入一个整数N 输出格式 输出一个 ...