移动端 实现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的潜力,其中包括:自动调整 ...
随机推荐
- js replace 用法
/g 表示全部 global 在很多项目中,我们经常需要使用JS,在页面前面对前台的某些元素做做修改,js 的replace()方法就必不可少. 经常使用"ABCABCabc". ...
- mathematica9激活
1.打开m9软件 2.打开keygen软件 3.点手动输入验证码,输入里面的id到keygen软件再点save mathpath 4.复制keygen软件里面 的mathpass到 将生成的mathp ...
- Picard Tools
Picard Tools - By Broad Institute http://broadinstitute.github.io/picard/command-line-overview.html ...
- iOS平台设置系统状态栏(通知栏、顶部状态栏)样式背景颜色或透明
5+App开发 状态栏 配置系统状态栏样式 iOS平台可支持对系统状态栏样式的配置,在应用manifest.json文件的plus->distribute->apple下添加UIStatu ...
- Codeforces807 B. T-Shirt Hunt 2017-05-08 23:23 175人阅读 评论(0) 收藏
B. T-Shirt Hunt time limit per test 2 seconds memory limit per test 256 megabytes input standard inp ...
- 图片捕获工具driftnet
driftnet是一款简单而使用的图片捕获工具,可以很方便的在网络数据包中抓取图片.该工具可以实时和离线捕获指定数据包中是图片,当然在kali里是有的. 在我之前的一篇博文<kali下搭建WiF ...
- codeforces 261B Maxim and Restaurant(概率DP)
B. Maxim and Restaurant time limit per test 2 seconds memory limit per test 256 megabytes input stan ...
- (原创)Hibernate 使用过程中(尤其是多对多关联中的级联保存和级联删除)的注意事项(基于项目的总结)
一.先上知识点: 1.hibernate多对多关联关系中最重要的参数是(基于配置文件xxx.hbm.xml文件形式): 1):inverse属性,如果设置inverse=“true”就代表让对方参与维 ...
- 拷贝构造函数——防篡改
对于普通类型的对象来说,他们之间的复制是简单的,比如: int a = 88; int b = a; 而类和普通对象不同,类对象内部结构一般较为复杂,存在各种成员变量. #include <io ...
- Android 广播代码的发送与接收
Android四大组件之一广播,使用的也比较多,广播可大致分为两种,一种是Android系统区域的广播,是由系统指令发出,例如:点亮屏幕广播,开机过程中的一些广播 省略-, 然而还有一种广播就是我们自 ...