在进行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. 1. Python3 环境搭建

    Python3 环境搭建 开门见山,其他关于Python发展史.语言类型.优缺点等等 可以自己去百度百度,这里就不多说了.其实基本想要学这门语言的时候,你已经了解差不多了!!! Python的运行环境 ...

  2. kafka学习总结之kafka核心

    1.  Kafka核心组件 (1)replication(副本).partition(分区) 一个topic可以有多个副本,副本的数量决定了有多少个broker存放写入的数据:副本是以partitio ...

  3. 20135202闫佳歆--week2 操作系统是如何工作的--学习笔记

    此为个人学习笔记存档 week 2 操作系统是怎么工作的 一.计算机是如何工作的?--三个法宝 (一)三个法宝 1.存储程序计算机 所有计算机的基础性的逻辑框架. 2.函数调用堆栈 在低级语言中并不很 ...

  4. LINUX内核分析第五周学习总结——扒开应用系统的三层皮（下）

    LINUX内核分析第五周学习总结——扒开应用系统的三层皮(下) 张忻(原创作品转载请注明出处) <Linux内核分析>MOOC课程http://mooc.study.163.com/cou ...

  5. C++：钻石继承与虚继承

    QUESTION:什么是钻石继承? ANSWER:假设我们已经有了两个类Father1和Father2,他们都是类GrandFather的子类.现在又有一个新类Son,这个新类通过多继承机制对类Fat ...

  6. C语言编程—自动生成四则运算升级版

    #include<stdio.h> #include<time.h> struct fenshu { int fenzi; int fenmu; }Fenshu[]; int ...

  7. WordCount 程序的实现

    WordCount是一个常见的工具,它能统计文本文件的字数.单词数和行数.在本次项目中,要求写一个命令行程序,模仿已有的WordCount.exe的功能,并加以扩充,统计出某程序设计语言源文件的字符数 ...

  8. SQL Server 删除重复数据只保留一条

    DELETE FROM Bus_TerminalMessage_Keywords WHERE Content IN (select Content from Bus_TerminalMessage_K ...

  9. vue,react,angular本地配置nginx 环境单页面应用

    一.起因:项目使用VUE,和react.构建单页面应用.在nginx的环境下只有一个index.html入口.这时候默认能够访问到vue,和react 路由 配置中的首页.内部连接也能够跳转但是不能给 ...

  10. ESXi主机性能问题

    服务器遇到一个问题 百度了下 基本发现是 四路的 windows 服务器的问题. 造成一些 性能降低. 然后查看了下几个虚拟机 的确是设置的4个虚拟插槽 根据百度的结果 要么改配置文件 要么改 这个四 ...