在进行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. PHP学习笔记2

    PHP Switch语句 用于根据多个不同条件执行不同动作.如果不在每个条件后加break,将会输出所有结果. <?php $language="java"; switch( ...

  2. 【助教】浅析log4j的使用

    有不少童鞋私信我一些在写代码时候遇到的问题,但是无法定位问题出在哪里,也没有日志记录,实际上,写日志是开发项目过程中很重要的一个环节,很多问题都可以从日志中找到根源,从而定位到出错位置,为解决问题提供 ...

  3. Mybatis：Eclipse引入dtd约束文件使得xml文件有提示

    https://blog.csdn.net/lsx2017/article/details/82558135

  4. final阶段140字评论

    按课堂顺序 1约跑APP ,无论从页面还是从功能来看完整度都很高了.演示也用了能展示的方式.多些趣味性就更赞了. 2礼物挑选小工具,做了能在规定时间内的功能.也算是对礼物固话的一个成本最低的回应. 3 ...

  5. Linux命令（十六） 压缩或解压缩文件和目录 zip unzip

    目录 1.命令简介 2.常用参数介绍 3.实例 4.直达底部 命令简介 zip 是 Linux 系统下广泛使用的压缩程序,文件压缩后扩展名为 ".zip". zip 命令用来将文件 ...

  6. thinkphp5 速查表

    本速查表里的类都是think为命名空间的,实例化时省去了  use.用的时候注意. 本速查表里会有四种方法的调用: 公有方法 $class = new Class();  $class->foo ...

  7. vue.js 添加 fastclick的支持 处理移动端click事件300毫秒延迟

    fastclick:处理移动端click事件300毫秒延迟. 1,先执行安装fastclick的命令 npm install fastclick 2,在main.js中引入,并绑定到body. imp ...

  8. CF 1070J Streets and Avenues in Berhattan

    DP的数组f其实开得不够大,应该开200000,但是它在cf上就是过了... 题意是把一堆字母分别分配到行和列. 分析一下,答案实际上只和n行中和m列中每种字母分配的个数有关.而且答案只和" ...

  9. iOS程序执行顺序 AppDelegate及 UIViewController 的生命周期

    iOS程序的启动执行顺序 AppDelegate 及 UIViewController 的生命周期 iOS应用程序的状态切换很重要,而UIViewControler对于iOS这种MVC模式来说尤为重要 ...

  10. selenium_UI自动化——篇1（基础）

    元素定位的几种方式: (1)driver.find_element_by_id("idname") (2)driver.find_element_by_name("nam ...