移动端 实现ul横向滚动条
ul {
display: flex;
width: 100%;
height: 3.333333rem;
background: #fff;
padding: 0.373333rem 0.32rem 0;
box-sizing: border-box;
/* 下面是实现横向滚动的关键代码 */
display: inline;
float: left;
white-space: nowrap;
overflow-x: scroll;
-webkit-overflow-scrolling: touch; /*解决在ios滑动不顺畅问题*/
overflow-y: hidden;
}
ul li {
display: inline-block; /*设置li为行内块级元素*/
width: 3.6rem;
height: 2.24rem;
text-align: left;
border-radius: 6px 6px 6px 6px;
margin-right: 0.373333rem;
}
隐藏滚动条
ul::-webkit-scrollbar {
display: none;
}
移动端 实现ul横向滚动条的更多相关文章
- 移动端添加横向滚动条&隐藏
添加横向滚动条ul { display: flex; overflow-x: auto; overflow-y: hidden; white-space: nowrap; }隐藏滚动条,保留滚动效果 ...
- 解决移动端浏览器页面 X轴横向滚动条问题
写web端页面的时候,总是会出现横向滚动条,即 X 轴滚动条,导致页面左右滑来滑去. 即使设置了 body,html {overflow-x:hidden;width:100%;} 也无法生效. 解决 ...
- DataGrid横向滚动条无法拖动的问题
项目中经常遇到一些问题,这些问题可能很简单,但是之前从未遇到,可能经过了一番谷歌,也可能是查阅了MSDN,或是借鉴了大牛博客,逐渐有了些眉目,为了将这些东西落地,也为了将来之不易的东西记录下来,以备今 ...
- sub,dl,dt,排版,横向滚动条,浮动元素居中,box-sizing
1.sub标签 下标 2.dl,dt,dd用的地方通常是具有标题,而标题下对应有若干列表简单的(栏目标题+对应标题列表)和标题对应下面有内容.在使用时候我们能简洁html代码情况下,学会灵活使用dl ...
- android 横向滚动条
/*** * 横向滚动条,修改版,从左向右滚动,支持html代码和html里面的网络图片 */public class MarqueeView extends LinearLayout { priva ...
- WPF,解决Listbox,按住ListboxItem向下拖出Listbox,横向滚动条跑到最后。
类似这种样式的控件,.,在横向滚动条隐藏的情况下有这样的问题.(横向滚动条显示的时候也会,,目前不知道怎么解决.) 因为这个控件偏移是利用ListBox的ItemsPanelTemplate模版里的S ...
- jquery横向滚动条
此代码献给wendy 由于工作太忙,下次再整理成插件调用,先记录下来,欢迎同学们提意见. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr ...
- 逆天的IE7中,诡异的横向滚动条
今天老邹我又要吐槽IE7了,这个奇葩浏览器总是不让省心.这回遇到的问题,灰常难发现是怎么回事,不过还是让我发现原因,哈哈,只要原因去干掉这个问题比躲避问题用别的办法绕开要爽的多啊. 首先我还是介绍下, ...
- 发掘ListBox的潜力(一):自动调整横向滚动条宽度
<自绘ListBox的两种效果>一文帖出之后,从反馈信息来看,大家对这种小技巧还是很认同.接下来我将继续围绕ListBox写一系列的文章,进一步发掘ListBox的潜力,其中包括:自动调整 ...
随机推荐
- 2018.09.21 atcoder An Invisible Hand(贪心)
传送门 简单贪心啊. 这题显然跟t并没有关系,取差量最大的几组买入卖出就行了. 于是我们统计一下有几组差量是最大的就行了. 代码: #include<bits/stdc++.h> #def ...
- js数组合并(一个数组添加到另一个数组里面)方法
js定义两个数组. var arrA=[1,2,3]; var arrB=[4,5,6]; 要实现[1,2,3,4,5,6],如果直接arrA.push(arrB); 则arrB只会作为了arrA的一 ...
- 一个用css写出来的下拉菜单
1 <style> 2 /* css*/ 3 #body{ 4 float: left; 5 } 6 #xialakuang{ 7 background-color:#f9f9f9; 8 ...
- 反爬虫破解系列-汽车之家利用css样式替换文字破解方法
网站: 汽车之家:http://club.autohome.com.cn/ 以论坛为例 反爬虫措施: 在论坛发布的贴子正文中随机抽取某几个字使用span标签代替,标签内容位空,但css样式显示为所代替 ...
- (网络流 模板 Edmonds-Karp)Drainage Ditches --POJ --1273
链接: http://poj.org/problem?id=1273 Drainage Ditches Time Limit: 1000MS Memory Limit: 10000K Total ...
- 20145209 2016-2017-2 《Java程序设计》第6周学习总结
20145209 2016-2017-2 <Java程序设计>第6周学习总结 教材学习内容总结 4.1 Y86指令集体系结构 •有8个程序寄存器:%eax.%ecx.%edx.%ebx.% ...
- hdu 2149
题目 巴什博奕(Bash Game) 巴什博奕(Bash Game):只有一堆n个物品,两个人轮流从这堆物品中取物,规 定每次至少取一个,最多取m个.最后取光者得胜. 显然,如果n=m+1,那么由于一 ...
- hdu 3664 1~n排列(ai>i ) 为k个数
http://acm.hdu.edu.cn/showproblem.php?pid=3664 求1~n的排列个数,使得逆序数(ai>i ) 为给定的k. dp[i][j]表示前1~i的排列中,有 ...
- CentOS7 Docker 安装
CentOS7 已经内置了docker ,可以直接安装 安装Docker 命令: sudo yum install -y docker 启动docker 命令: service docker st ...
- linux系统编程之错误处理:perror,strerror和errno
1,在系统编程中错误通常通过函数返回值来表示,并通过特殊变量errno来描述. errno这个全局变量在<errno.h>头文件中声明如下:extern int errno; errno是 ...