在进行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. easypermissions拒绝权限后闪退。 java.lang.NoSuchMethodError: No virtual method isStateSaved()Z in class Landroid/support/v4/app/FragmentManager

    Process: com.tazan.cd.streetlight, PID: 18825 java.lang.NoSuchMethodError: No virtual method isState ...

  2. mysql find_in_set 与 in 的用法与区别，mysql范围搜索，mysql范围查询

    mysql find_in_set 与 in 的用法与区别 1.find_in_set 用于模糊查询,并且数据库中的值是用英文逗号分隔的: 例如: (1).去字段中查询 select find_in_ ...

  3. Qt中动态链接库的使用

    转自: http://www.qtcn.org/bbs/read.php?tid=14719 现在有些软件有自动升级功能,有些就是下载新的DLL文件,替换原来的动态链接库.MFC好象也有类似机制 Qt ...

  4. Elasticsearch介绍和安装

    Elasticsearch介绍和安装 软件包: 链接:https://pan.baidu.com/s/1O_C0JQGfF8sC_OtcCCLNoQ 提取码:3iai 1.1.简介 1.1.1.Ela ...

  5. Netty堆外内存泄漏排查，这一篇全讲清楚了

    上篇文章介绍了Netty内存模型原理,由于Netty在使用不当会导致堆外内存泄漏,网上关于这方面的资料比较少,所以写下这篇文章,专门介绍排查Netty堆外内存相关的知识点,诊断工具,以及排查思路提供参 ...

  6. 洛谷$P5444\ [APIO2019]$奇怪装置 数论

    正解:数论 解题报告: 传送门$QwQ$ 我好像当初考的时候这题爆零了,,,部分分都没想到,,,我真的好菜$kk$ 考虑如果在$t_1,t_2$两个时刻有$x_1=x_2,y_1=y_2$是什么情况$ ...

  7. 洛谷$P1155$ 双栈排序 贪心+二分图匹配

    正解:贪心+二分图匹配 解题报告: 传送门$QwQ$ 跪了,,,我本来以为我$NOIp$做得差不多了,,,然后康了一眼发现没做多少啊其实$QAQ$ 然后来康题趴$QwQ$ 首先考虑如果只有一个栈的情况 ...

  8. $Poj2083/AcWing118\ Fractal$ 模拟

    $AcWing$ $Sol$ 一年前做过差不多的南蛮图腾,当时做出来还是很有成就感的$OvO$ $N<=7$,就是模拟模拟,预处理一下,$over$ $Code$ #include<bit ...

  9. js获取当前农历时间

    <template> <div class="gaia-header"> <img alt="gaia_logo" src=&qu ...

  10. 「学习笔记」ST表

    问题引入 先让我们看一个简单的问题,有N个元素,Q次操作,每次操作需要求出一段区间内的最大/小值. 这就是著名的RMQ问题. RMQ问题的解法有很多,如线段树.单调队列(某些情况下).ST表等.这里主 ...