overflow-x: scroll;横向滑动详细讲解
overflow-x: scroll;横向滑动（移动端使用详解）
css3 ， ie8以上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>横向滑动overflow-x: scroll</title>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.box1{
width: 100px;
height: 60px;
overflow: hidden;/* 超出隐藏滚动条 */
background-color: skyblue;
}
.box1 .wrap{
width: 100px;/* 和父盒子宽度一样 */
height: 76px;/* 比里层元素高16px 为了隐藏滚动条*/
overflow-x: scroll;/* 定义超出此盒子滚动 */
overflow-y: hidden;
}
.box1 .wrap ul{
width: 300px;
display: flex;
}
.box1 .wrap ul li{
flex: 1;
width: 60px;
height: 60px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box1">
<div class="wrap">
<ul>
<li>1移动端</li>
<li>2可滑动</li>
<li>3ie8以上</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
</body>
</html>
overflow-x: scroll;横向滑动详细讲解的更多相关文章
- 纯css实现移动端横向滑动列表&&overflow:atuo;隐藏滚动条
<!DOCTYPE html> <html> <head> <title>横向滑动</title> <style type=" ...
- ios7中使用scrollview来横向滑动图片，自动产生偏移竖向的偏移 问题
ios7中使用scrollview来横向滑动图片,自动产生偏移竖向的偏移 问题 如图红色为scrollview的背景色,在scrollview上加了图片之后,总会有向下的偏移 设置conten ...
- node+vue进阶【课程学习系统项目实战详细讲解】打通前后端全栈开发(1)：创建项目，完成登录功能
第一章 建议学习时间8小时·分两次学习 总项目预计10章 学习方式:详细阅读,并手动实现相关代码(如果没有node和vue基础,请学习前面的vue和node基础博客[共10章]) 视频教程地 ...
- 实现移动端touch事件的横向滑动列表效果
要实现手机端横向滑动效果并不难,了解实现的原理及业务逻辑就很容易实现.原理:touchstart(手指按下瞬间获取相对于页面的位置)——>touchmove(手指移动多少,元素相应移动多少). ...
- Siki_Unity_2-1_API常用方法和类详细讲解(下)
Unity 2-1 API常用方法和类详细讲解(下) 任务101&102:射线检测 射线origin + direction:射线检测:射线是否碰撞到物体 (物体需要有碰撞器),碰撞物体的信息 ...
- 纯css实现移动端横向滑动列表
前几天在公司做开发的时候碰到一个列表横向滑动的功能,当时用了iscroll做,结果导致手指触到列表的范围内竖向滑动屏幕滑动不了的问题. 这个问题不知道iscroll本身能不能解决,当时选择了换一种方式 ...
- 纯css实现移动端横向滑动列表(可应用于ionic3移动app开发)
前几天在公司做开发的时候碰到一个列表横向滑动的功能,当时用了iscroll做,结果导致手指触到列表的范围内竖向滑动屏幕滑动不了的问题. 这个问题不知道iscroll本身能不能解决,当时选择了换一种方式 ...
- 微信小程序 scroll-view 左右横向滑动没有效果（无法滑动）问题
小程序组件 scroll-view 中分别有上下竖向滑动和左右横向滑动之分,在这次项目中刚好需要用到横向滑动,但在测试过程中发现横向滑动没有了效果(静止在那里没移动过),经调试发现: 1.scroll ...
- C++语言堆栈的详细讲解
本文主要向大家介绍了C++语言堆栈的详细讲解,通过具体的内容向大家展示,希望对大家学习C++语言有所帮助. 一.预备知识—程序的内存分配 一个由c/C++编译的程序占用的内存分为以下几个部分 1.栈区 ...
随机推荐
- Appium python自动化测试系列之Android知识讲解(三)
3.1 ADB工具讲解 3.1.1 什么是ADB呢? 我们不去解释官方语言的翻译,给大家说一个通熟易懂的说法,ADB我理解为他就是电脑和手机连接的桥梁.此连接不是充电的连接,大家不要混淆,说他是一个 ...
- BAT级别分类
阿里的级别:P为技术岗,M为管理岗.P7是技术专家级别. 阿里级别对应薪资: 百度使用的T系列及对应薪资: 腾讯的T系列及对应薪资:
- Android 发展史
1. 概述 http://zh.wikipedia.org/wiki/Android# 2. Android版本发布表 Time Code name Version API level 2014年1 ...
- java 集合之实现类ArrayList 和 LinkedList
List 的方法列表 方法名 功能说明 ArrayList() 构造方法,用于创建一个空的数组列表 add(E e) 将指定的元素添加到此列表的尾部 get(int index) 返回此列表中指定位置 ...
- 见到过的MOS管的一些参数
选择MOS管的时候需要注意的几个参数1,VDSS(击穿电压):此电压要选择合适,一般是加入的电压值的峰值的两倍.2,VGS(th)(开启电压):3,RDS(on)(漏源电阻):这个值要尽可能的小,因为 ...
- 【CSS】伪类和伪元素选择器
伪类 基于当前元素所处的状态或具有的特性,用于设置元素自身的特殊效果. a:link 规定所有未被点击的链接: a:visited 匹配多有已被点击过的链接: a:active 匹配所有鼠标按下 ...
- （转）Java 网络IO编程总结（BIO、NIO、AIO均含完整实例代码）
原文出自:http://blog.csdn.net/anxpp/article/details/51512200 1.BIO编程 1.1.传统的BIO编程 网络编程的基本模型是C/S模型,即两个进程间 ...
- ＭySQL技术内幕汇总
MySql技术内幕之MySQL入门(1) MySql技术内幕之MySQL入门(1) 检查系统中是否已经安装了MySQL sudo netstat -tap | grep mysql 若没有显示已安装结 ...
- json_encode()中文不转码
php使用json_encode()把数组转换为json的时候,总会把中文进行转码,转码后从json数据上我们无法看出其中的中文文字.php5.4以后,当json_encode()的第二个参数赋值为J ...
- Android Studio常见问题解决
1.Error:Execution failed for task ':XXXX:processDebugManifest'. > Manifest merger failed with mul ...