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横向滚动条的更多相关文章

  1. 移动端添加横向滚动条&隐藏

    添加横向滚动条ul { display: flex; overflow-x: auto; overflow-y: hidden; white-space: nowrap; }隐藏滚动条,保留滚动效果 ...

  2. 解决移动端浏览器页面 X轴横向滚动条问题

    写web端页面的时候,总是会出现横向滚动条,即 X 轴滚动条,导致页面左右滑来滑去. 即使设置了 body,html {overflow-x:hidden;width:100%;} 也无法生效. 解决 ...

  3. DataGrid横向滚动条无法拖动的问题

    项目中经常遇到一些问题,这些问题可能很简单,但是之前从未遇到,可能经过了一番谷歌,也可能是查阅了MSDN,或是借鉴了大牛博客,逐渐有了些眉目,为了将这些东西落地,也为了将来之不易的东西记录下来,以备今 ...

  4. sub,dl,dt,排版,横向滚动条,浮动元素居中,box-sizing

    1.sub标签 下标 2.dl,dt,dd用的地方通常是具有标题,而标题下对应有若干列表简单的(栏目标题+对应标题列表)和标题对应下面有内容.在使用时候我们能简洁html代码情况下,学会灵活使用dl ...

  5. android 横向滚动条

    /*** * 横向滚动条,修改版,从左向右滚动,支持html代码和html里面的网络图片 */public class MarqueeView extends LinearLayout { priva ...

  6. WPF,解决Listbox,按住ListboxItem向下拖出Listbox,横向滚动条跑到最后。

    类似这种样式的控件,.,在横向滚动条隐藏的情况下有这样的问题.(横向滚动条显示的时候也会,,目前不知道怎么解决.) 因为这个控件偏移是利用ListBox的ItemsPanelTemplate模版里的S ...

  7. jquery横向滚动条

    此代码献给wendy 由于工作太忙,下次再整理成插件调用,先记录下来,欢迎同学们提意见. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr ...

  8. 逆天的IE7中,诡异的横向滚动条

    今天老邹我又要吐槽IE7了,这个奇葩浏览器总是不让省心.这回遇到的问题,灰常难发现是怎么回事,不过还是让我发现原因,哈哈,只要原因去干掉这个问题比躲避问题用别的办法绕开要爽的多啊. 首先我还是介绍下, ...

  9. 发掘ListBox的潜力(一):自动调整横向滚动条宽度

    <自绘ListBox的两种效果>一文帖出之后,从反馈信息来看,大家对这种小技巧还是很认同.接下来我将继续围绕ListBox写一系列的文章,进一步发掘ListBox的潜力,其中包括:自动调整 ...

随机推荐

  1. for() 和$.each()的用法区别

    一.对于数组 var arr=['姚明','易建联','张继科']; $.each(arr,function(index,value){ document.write(index+"=&qu ...

  2. using directive 使用指令,与using declaration使用声明。

    使用指令是把名字空间中的所有名字引入到当前作用域,而使用声明是把名字空间的某个名字引入到当前作用域中 语法如下 //test.cpp #include<iostream> //using ...

  3. 2018.09.22 atcoder Integers on a Tree(构造)

    传送门 先考虑什么时候不合法. 第一是考虑任意两个特殊点的权值的奇偶性是否满足条件. 第二是考虑每个点的取值范围是否合法. 如果上述条件都满足的话就可以随便构造出一组解. 代码: #include&l ...

  4. 2018.09.10 bzoj1499: [NOI2005]瑰丽华尔兹(单调队列优化dp)

    传送门 单调队列优化dp好题. 这题其实很简单. 我们很容易想到一个O(T∗n∗m)" role="presentation" style="position: ...

  5. 实现WIFI MAC认证与漫游

    前言 单位里有10来个网件的AP(WNAP210),需要对接入端(主要是手机)进行MAC认证,原来采用AP本地MAC认证,但是人员经常变动(离职),另外人员的岗位(流水线)也经常调整,这样就需在变动后 ...

  6. The First Android App----Adding the Action Bar

    In its most basic form, the action bar displays the title for the activity and the app icon on the l ...

  7. HDU1459 非常可乐(BFS) 2016-07-24 15:00 165人阅读 评论(0) 收藏

    非常可乐 Problem Description 大家一定觉的运动以后喝可乐是一件很惬意的事情,但是seeyou却不这么认为.因为每次当seeyou买了可乐以后,阿牛就要求和seeyou一起分享这一瓶 ...

  8. hdu 1799 循环多少次?

    题目 题意:给出n,m,其中m表示有几层循环,求循环的次数 ①如果代码中出现 for(i=1;i<=n;i++) OP ; 那么做了n次OP运算: ②如果代码中出现 fori=1;i<=n ...

  9. 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的排列中,有 ...

  10. NLTK之WordNet 接口

    WordNet是面向语义的英语词典,类似于传统字典.它是NLTK语料库的一部分,可以被这样调用: 更简洁的写法: 1.单词 查看一个单词的同义词集用synsets(); 它有一个参数pos,可以指定查 ...