在进行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. Jmeter配置元件——CSV DataSet Config参数化

    在聊CSV DataSet Config配置元件前,先来讨论下为何要参数化? 比如在做性能测试过程中, 一般我们需要模拟多个用户进行操作, 为了满足实际场景, 模拟真实的用户行为, 我们需要做到模拟的 ...

  2. Vue学习笔记-使用ElementUI

    ElementUI官方地址:https://element.eleme.cn/2.11/#/zh-CN 1.初期准备 首先我们准备几个基本的样式文件:normalize.css 和 base.css ...

  3. 根据经纬度查询附近几公里的门店（<5）代表5公里

    select * from 表名 where status=1 and isopen =0 and jingyingtype=1 and waimai=1 and bstatus = 1 and (a ...

  4. 2019 沈阳网络赛 Fish eating fruit

    这题看了三个月,终于过了,第一次看的时候没学树形DP,想用点分治但是不会 后来学了二次扫描,就有点想法了.... 这东西也真就玄学了吧... #include<iostream> #inc ...

  5. flask的url处理器（url_defaults和url_value_preprocessor）

    url处理器的作用:对于一部分资源, 你并不是很清楚该如何设定其 URL 相同的部分.例如可能有一些URL包含了几个字母来指定的多国语言语种,但是你不想在每个函数里都手动识别到底是哪个语言 rom f ...

  6. vue项目创建步骤 和 路由router知识点

    菜单快捷导航: vue项目创建 vue路由router知识点(路径参数.查询参数.命名路由.嵌套路由.命名视图.hash/history模式) 1.创建一个vue项目步骤 (windows环境下).创 ...

  7. tomcat 配置项目前缀（推荐方式四）

    一. 显示配置 Context 的 path   需要在 server.xml 文件中手动配置. <Host name="localhost" appBase="w ...

  8. 大学最新毕业论文参考文献，包含java，jsp，mysql，Android，sql，PHP

    每当毕业论文写到最后需要参考文献时,往往是很令人头疼的,因为有的老师对参考文献的要求是很多的,比如需要国内的和国外的,时间必须是近三年的,满足XXX要求的文献至少需要三篇以上等等.今天我就来给大家整理 ...

  9. 洛谷$P4211\ [LNOI2014]\ LCA$ 树链剖分+线段树

    正解:树剖+线段树 解题报告: 传送门$QwQ$ 看到$dep[lca]$啥的就想到之前托腮腮$CSP$模拟$D1T3$的那个套路,,, 然后试下这个想法,于是$dep[lca(x,y)]=\sum_ ...

  10. SpringBoot拦截器没有生效的原因

    最近的一个项目中,需要实现一个记录系统请求日志的功能,我通过拦截器实现了这个功能,但是,测试的时候发现拦截器没有发挥作用,检查了很久,没有发现错的地方,系统也没有报错,最终在网上找打了答案. 原来之前 ...