<!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. 简单了解下CAP定理与BASE定理

    分布式环境下的各种问题 通信异常 网络不可用风险高,消息丢失.消息延迟非常普遍 网络分区(脑裂)   网络发生异常情况,延迟增加,导致所有组成分布式系统的节点中,只有部分节点之间能够正常通信,而另一些 ...

  2. 不论是 Basic Auth 还是 Digest Auth，都会有 Authorization 字段

    GET /dir/index.html HTTP/1.0 Host: localhost Authorization: Digest username="Mufasa", real ...

  3. ThinkJS前端搭配vue时的Nginx配置

    Thinkjs 作为奇舞团开源的nodejs mvc框架之一,引起了很多NodeJS程序员的亲赖.但是其关于静态文件处理部分支持不够完善,主要是体现在SPA单页应用,之前在ThinkJS 2.*版本时 ...

  4. flutter在2019年会有怎样的表现？

    2019独角兽企业重金招聘Python工程师标准>>> Flutter的趋势 在移动端,受成本和效率的驱使,跨平台一站式开发慢慢成为一个趋势.从Hybird,RN,WEEX,Flut ...

  5. Ubuntu下访问Windows中Postgresql

    因为项目的原因,需要将Ubuntu中的一些信息记录到Windows中的Postgresql数据库中,查看网上信息,最后成功了,特地记录以下,需要以下步骤: (1)在Windows中Postgresql ...

  6. composer+psr-4实现自动加载

    自动加载 对于库的自动加载信息,Composer 生成了一个 vendor/autoload.php 文件.你可以简单的引入这个文件,你会得到一个免费的自动加载支持. require 'vendor/ ...

  7. POJ - 3074 Sudoku （搜索）剪枝+位运算优化

    In the game of Sudoku, you are given a large 9 × 9 grid divided into smaller 3 × 3 subgrids. For exa ...

  8. python（类继承）

    一.继承 1.单继承 一个对象使用另一个对象的属性和方法,被继承的类也称父类 (1)父类与子类的方法不一样 class Four(): def sub(self,x,y): return x + y ...

  9. undef用法

    #undef的语法 定义:#undef 标识符,用来将前面定义的宏标识符取消定义. 整理了如下几种#undef的常见用法. 1. 防止宏定义冲突在一个程序块中用完宏定义后,为防止后面标识符冲突需要取消 ...

  10. 快速幂 递归&&非递归 模板

    一.递归版快速幂 inline int qpow(int x,int y,int p){ if(y==0) return 1; int z=qpow(x,y>>1,p); z=1ll*z* ...