移动端 实现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的潜力,其中包括:自动调整 ... 
随机推荐
- 使用kindeditor 4.1.7 编辑器 注意事项,上传图片失败  问题 ,
			<script charset="utf-8" src="editor/kindeditor.js"></script> <scr ... 
- /etc/inittab加入自动启动格式
			R01:35:respawn:/usr/bin/exe_program 说明 R01:标识,每一行必须唯一(R01并无特殊含义,可自定义). 35:有效模式,3字符界面启动,5图形界面启动 respa ... 
- 【Unity】1.1 安装Unity 5.3.4 开发环境
			分类:Unity.C#.VS2015 创建日期:2016-03-23 一.简介 Unity分个人版(Personal)和专业版(Pro).个人版是免费的(部分高级功能受限,但初学者也用不到它),Pro ... 
- java拷贝文件到另一个目录下
			package com.util; import java.io.File;import java.io.FileInputStream;import java.io.FileOutputStream ... 
- python中的list和array的不同之处 及转换
			python中的list和array的不同之处list是列表,可以通过索引查找数值,但是不能对整个列表进行数值运算 In [96]: b=[1,2] In [97]: b[1]Out[97]: 2In ... 
- 修改Python IDLE代码配色及语法高亮主题
			初学Python,想必大家拿来练习最多的IDE就是Python自带的IDLE了,但是默认的代码配色及语法高亮主题确实很不适应,所以我们需要做个小小的美化,比如像下面这样我做的美化配置: HOW TO ... 
- 14)settings.xml
			1. User Level. ${user.home}/.m2/settings.xml 2. Global Level. ${maven.home}/conf/settings.xml <se ... 
- HDU1518 Square(DFS)                                                                                            2016-07-24 15:08             49人阅读              评论(0)              收藏
			Square Problem Description Given a set of sticks of various lengths, is it possible to join them end ... 
- c#位运算小例子笔记
			关于位运算,网上有挺多好的博客介绍过,我就不多解释了 这里只记录一个小例子,是在理解位运算时候写的,帮助自己加深一下印象,做个笔记mark一下 具体场景 摇骰子游戏 1每个骰子有6个点,1-3为小,4 ... 
- C# 一些代码小结--datGirdView 保存到csv文件
			if (dataGridView1.Rows.Count == 0) { MessageBox.Show("No data available!", "Prompt&qu ... 
