在进行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. 第二阶段冲刺——two

    个人任务: 王金萱:优化作业查询结果,按学号排列. 马佳慧:测试登录功能并优化. 司宇航:修复博客作业查询功能. 季方:测试博客作业查询功能. 站立会议: 任务看板和燃尽图:

  2. (转)广度优先搜索BFS和深度优先搜索DFS

    1. 广度优先搜索介绍 广度优先搜索算法(Breadth First Search),又称为"宽度优先搜索"或"横向优先搜索",简称BFS. 它的思想是:从图中 ...

  3. Android 7.0+相机、相册、裁剪适配问题

    Android 7.0+相机.相册.裁剪适配问题 在manifest中: <provider android:name="android.support.v4.content.File ...

  4. PAT 甲级 1115 Counting Nodes in a BST

    https://pintia.cn/problem-sets/994805342720868352/problems/994805355987451904 A Binary Search Tree ( ...

  5. Windows 10 中的存储空间

    存储空间有助于保护你的数据免受驱动器故障的影响,并随着你向电脑添加驱动器而扩展存储.你可以使用存储空间将两个或多个驱动器一起分组到一个存储池中,然后使用该池的容量来创建称为存储空间的虚拟驱动器.这些存 ...

  6. Django从入门到放弃

    第一篇: web应用 HTTP协议 web框架 第二篇:Djangon简介 第三篇:路由控制 第四篇:视图层 第五篇:模版层 第六篇:模型层:单表操作,多表操作,常用(非常用)字段和参数,Django ...

  7. MT【98】三元对称不等式

    评:这是一道浙江省省赛题,这里利用对称性,设$x\le y\le z$从而解决了问题.值得注意的是此处三元轮换对称正好也是完全对称,但如果变成一般的$n\ge4$元对称问题时,就不能设大小关系.事实上 ...

  8. 【BZOJ1304】[CQOI2009]叶子的染色（动态规划）

    [BZOJ1304][CQOI2009]叶子的染色(动态规划) 题面 BZOJ 洛谷 题解 很简单. 设\(f[i][0/1/2]\)表示以\(i\)为根的子树中,还有颜色为\(0/1/2\)(\(2 ...

  9. BZOJ 2648 / 2716 K-D Tree 模板题

    #include <cstdio> #include <cmath> #include <cstring> #include <algorithm> # ...

  10. 动态生成web表-asp.net table

    1. 页面上定义一个server 的table <table style="width: 100%" id="tbContent" runat=" ...