<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>

        ul {

            list-style: none;

            width:300px;

            margin:100px auto;

            height:100px;

            display: -webkit-box;

            white-space: nowrap;

            overflow: hidden;

            -webkit-backface-visibility: hidden;

            -webkit-perspective: 1000;

            -webkit-overflow-scrolling: touch;

            text-align: justify;

            overflow-x: initial;

        }

        li {

            width:100px;

            height:100px;

            line-height: 100px;

            text-align: center;

            background-color: #1b961b;

            border:1px solid;

        }

        @media only screen and (max-width: 768px){

            ul {

                width:100%;

            }

        }

    </style>

</head>

<body>

    <div class="wrap">

        <ul>

            <li>1</li>

            <li>2</li>

            <li>3</li>

            <li>4</li>

            <li>5</li>

            <li>6</li>

            <li>7</li>

            <li>8</li>

            <li>9</li>

            <li>0</li>

        </ul>

    </div>

</body>

</html>

　　在移动端使用，主要看ul上的属性

移动端纯css超出盒子出现横向滚动条的更多相关文章

  1. css超出盒子隐藏

    效果如图1-1. 效果图1-1 css代码: white-space: nowrap;overflow: hidden; text-overflow: ellipsis; display: inlin ...

  2. 小tip:纯CSS让overflow:auto页面滚动条出现时不跳动

    本文转载于张鑫旭博客,原文地址:http://www.zhangxinxu.com/wordpress/?p=4552 一.水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水 ...

  3. 纯CSS让overflow:auto页面滚动条出现时不跳动

    现代浏览器滚动条默认是overflow:auto类型的,也就是如果尺寸不足一屏,没有滚动条:超出,出现滚动条.于是,问题来了: 信息流页面,如新浪微博,是从上往下push渲染的.开始只有头部一些信息加 ...

  4. 追求极致--纯css制作三角、圆形按钮，兼容ie6

    参考了天猫.微博等网站的做法,用纯html和css实现,效果还是不错的.以下是成果,兼容主流浏览器,包括ie6. <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  5. 纯CSS实现移动端常见布局——高度和宽度挂钩的秘密

    纯CSS实现移动端常见布局--高度和宽度挂钩的秘密 不踩坑不回头.之前我在一个项目中大量使用css3的calc计算属性.写代码的时候真心不要太爽啊-可是在项目上线之后,才让我崩溃了,原因非常easy, ...

  6. 纯css实现table表格固定列和表头,中间横向滚动的思路-附案例

    最近做的后台管理系统要处理大量的表格 原项目是采用的for循环加拼接字符串的方式实现;导致js代码一大堆;各种单引号和双引号的嵌套;让人头疼;遂引入vue.js;用v-for做模板渲染;工作量顿时减轻 ...

  7. 超强的纯 CSS 鼠标点击拖拽效果

    背景 鼠标拖拽元素移动,算是一个稍微有点点复杂的交互. 而在本文,我们就将打破常规,向大家介绍一种超强的仅仅使用纯 CSS 就能够实现的鼠标点击拖拽效果. 在之前的这篇文章中 -- 不可思议的纯 CS ...

  8. CSS布局技巧 -- 纯CSS让子元素的宽度总和决定其父元素的宽度

    使用场景 在移动端屏幕宽度有限的前提下,使用横向滚动的方式展示更多的内容.在这样的需求下,希望父元素作为容器,其宽度可以又横向排列资源的总宽度动态撑开,超过祖父元素的宽度:在不超过祖父元素时,自动继承 ...

  9. 分享：纯 css 瀑布流 和 js 瀑布流

    分享一次纯 css 瀑布流  和 js 瀑布流 纯 css 写瀑布流 1.multi-columns 方式: 通过 Multi-columns 相关的属性 column-count.column-ga ...

随机推荐

  1. 十分钟搞懂Elasticsearch数字搜索原理

    更多精彩内容请看我的个人博客或者扫描二维码,关注微信公众号:佛西先森 前言 Elasticsearch诞生的本意是为了解决文本搜索太慢的问题,ES会默认将所有的输入内容当作字符串来理解,对于字段类型是 ...

  2. VideoView--简单的设置全屏幕播放

    我说的最主要的是要在布局哪里设置一下,如: <com.example.mypalyer.fullScreen          android:id="@+id/videoView1& ...

  3. PHP 构造方法 __construct()

    PHP 构造方法 __construct() PHP 构造方法 __construct() 允许在实例化一个类之前先执行构造方法. 构造方法 构造方法是类中的一个特殊方法.当使用 new 操作符创建一 ...

  4. 怎么在java中创建一个自定义的collector

    目录 简介 Collector介绍 自定义Collector 总结 怎么在java中创建一个自定义的collector 简介 在之前的java collectors文章里面,我们讲到了stream的c ...

  5. Scala教程之:Scala基础

    文章目录 常量 变量 代码块 函数 方法 类 case类 对象 trait main方法 这篇文章我们大概过一下Scala的基础概念,后面的文章我们会有更详细的讲解Scala的具体内容. 常量 在Sc ...

  6. 疫情之下微软收入猛增15%！远程办公产品Teams日活达7500万

    当地时间 2020 年 4 月 29 日,微软公布了截止 2020 年 3 月 31 日的 2020 财年第三季度财报. 这是微软首次在财报中显示新冠疫情的影响——疫情之下,远程办公.远程教育和游戏场 ...

  7. 【Linux常见命令】head命令

    head - output the first part of files 读取文件的前n行,默认前10行 语法: head [OPTION]... [FILE]... 参数: -n 数字 显示前n行 ...

  8. 【Linux常见问题】CentOS 7 root用户密码忘记，找回密码方法

    1.开机按esc 2.选择CentOS Linux (3.10.0-693.......)     按 e 键: 3.光标移动到 linux 16 开头的行,找到 ro 改为 rw init=sysr ...

  9. python连接mysql数据表查询表获取数据导入到txt中

    import pymysql'''连接mysql数据表查询表获取数据导入到txt中'''#查询结果写入数据到txtdef get_loan_number(file_txt): connect = py ...

  10. 《LabVIEW 虚拟仪器程序设计从入门到精通（第二版）》一1.3　小结

    本节书摘来自异步社区<LabVIEW 虚拟仪器程序设计从入门到精通(第二版)>一书中的第1章,第1.3节,作者 林静 , 林振宇 , 郑福仁,更多章节内容可以访问云栖社区"异步社 ...