在进行app开发中经常遇到横向滚动的效果，相信很多人都是用js写的吧，其实用css的overflow-x也可以写出啦哦~~~

（1）介绍overflow-x:

　　1）浏览器支持

　　　　所有主流浏览器都支持 overflow-x 属性。

　　　　注释：overflow-x 属性无法在 IE8 以及更早的浏览器正确地工作。

　　2）定义：

　　　　是否对内容的左/右边缘进行裁剪 - 如果溢出元素内容区域的话

　　3）语法（是滴，很熟悉）：

　　

　　4）代码：

　　

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

    <title>test overflow</title>

    <style type="text/css">

    /* 滚动的三要素：

            1：父盒子设置width为100%，横向滚动overflow-x: scroll，不换行white-space: nowrap;

            2.子元素设置为行内块级元素display: inline-block;

     */

        * {

            margin: 0;

            padding: 0;

        }

        ul {

            width: 100%;

            padding: 20px;

            border: 1px solid red;

            overflow-x: auto;

            white-space: nowrap;

        }

        li {

            display: inline-block;

            border: 1px solid yellow;

            padding: 10px 30px;

        }

    </style>

</head>

<body>

        <ul>

            <li class="flex" >美妆</li>

            <li class="flex" >服饰</li>

            <li class="flex" >衣服</li>

            <li class="flex" >化妆品</li>

            <li class="flex" >童装</li>

        </ul>

</body>

</html>

5）效果：

利用overflow-x实现横向滚动的xiaoguo的更多相关文章

  1. 【吉光片羽】js横向滚动与浮动导航

    1.横向滚动,这个方法是见过最简洁的了. #demo { background: #FFF; overflow: hidden; border: 1px dashed #CCC; width: 117 ...

  2. js实现文字横向滚动

    页面布局      <div id="scroll_div" class="fl">         <div id="scroll ...

  3. html5 tab横向滚动,无滚动条（transform：translate）

    html5 横向滚动,用到了 touchstart.touchmove.touchend 控制修改transform:translate属性;[手机端或者浏览器模拟手机模式才有效果] [转载请注明出处 ...

  4. jQuery实现文字横向滚动效果

    HTML代码: <div id="aaa" style="width:100px; position:relative; white-space:nowrap; o ...

  5. react-native 横向滚动的商品展示

    在app中会有这种页面 像这样商品是横向的,而且要滚动,思路是利用 ScrollView 横向的滚动 思路: (a): 横向滚动的整体作为一个组件  ShopCenter {/*** 横向滚动 *** ...

  6. JS浏览器滚轮事件实现横向滚动照片展

    if(window.attachEvent){ ///*IE8注册事件*/ this.oc.attachEvent('onmousewheel',function(e) { //函数体 }); } e ...

  7. H5实现横向滚动的方法总结

    小程序中有横向滚动的swiper,H5中目前得手动实现. 实现方法如下: 外层需要设置: overflow: scroll;white-space: nowrap; 内层需要设置: display: ...

  8. 【CSS3】精美横向滚动菜单按钮

    废话不多说,直接上图: 然后是代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  9. web开发 小方法1-禁止横向滚动

    最近学了学做了个公司的网站  总结了一些小方法 比如取消横向滚动条并禁止的横向滚动 这样就可以吧超出的切掉让网页更和谐 在body 标签 body{ text-align: center; overf ...

随机推荐

  1. [T-ARA][결혼 하지마][不要结婚]

    歌词来源:http://music.163.com/#/song?id=27808773 作曲 : 二段横踢 [作曲 : 二段横踢] 作词 : 二段横踢 [作词 : 二段横踢] Hey anybody ...

  2. 《Linux内核设计与实现》读书笔记——第一、 二章

    <Linux内核设计与实现>读书笔记--第一. 二章 标签(空格分隔): 20135321余佳源 第一章 Linux内核简介 1.Unix内核特点 十分简洁:仅提供几百个系统调用并且有明确 ...

  3. 第二个Sprint冲刺第 八天（燃尽图）

    因为今天停电了,所以我们也休息一天!

  4. bing背单词交互流程 - Chongyang Bai

    昨天和travis,钟秋开会确认了bing背单词的手机界面交互流程.我在这里简单描述一下,设计页面暂时不能贴出来,期待大家的宝贵意见 b(￣▽￣)d. 单词本浏览界面:单词本被分为两类,用户单词本和单 ...

  5. Java之递归遍历目录，修改指定文件的指定内容

    EditProperties.java package PropertiesOperation.Edit; import java.io.File; /** * 替换指定Porpoerties文件中的 ...

  6. Vue实现对数组、对象的深拷贝、复制

    当组件间传递对象时,由于此对象的引用类型指向的都是一个地址(除了基本类型跟null,对象之间的赋值,只是将地址指向同一个,而不是真正意义上的拷贝),如下 数组: ,,]; var b = a; b.p ...

  7. 5Java异常处理

    五.异常 异常概念总结:   练习一:异常的体系    问题:    1. 请描述异常的继承体系    2. 请描述你对错误(Error)的理解    3. 请描述你对异常(Expection的理解) ...

  8. IDEA 调试技巧

    转载:http://blog.csdn.net/victor_cindy1/article/details/52336983 1.这里以一个web工程为例,点击图中按钮开始运行web工程. 2.设置断 ...

  9. LCM Cardinality UVA - 10892（算术基本定理）

    这题就是 LightOJ - 1236 解析去看这个把https://www.cnblogs.com/WTSRUVF/p/9185140.html 贴代码了: #include <iostrea ...

  10. 学习Spring Boot：（十四）spring-shiro的密码加密

    前言 前面配置了怎么使用 shiro ,这次研究下怎么使用spring shiro的密码加密,并且需要在新增.更新用户的时候,实现生成盐,加密后的密码进行入库操作. 正文 配置凭证匹配器 @Bean ...