移动端纯css超出盒子出现横向滚动条
<!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超出盒子出现横向滚动条的更多相关文章
- css超出盒子隐藏
效果如图1-1. 效果图1-1 css代码: white-space: nowrap;overflow: hidden; text-overflow: ellipsis; display: inlin ...
- 小tip:纯CSS让overflow:auto页面滚动条出现时不跳动
本文转载于张鑫旭博客,原文地址:http://www.zhangxinxu.com/wordpress/?p=4552 一.水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水 ...
- 纯CSS让overflow:auto页面滚动条出现时不跳动
现代浏览器滚动条默认是overflow:auto类型的,也就是如果尺寸不足一屏,没有滚动条:超出,出现滚动条.于是,问题来了: 信息流页面,如新浪微博,是从上往下push渲染的.开始只有头部一些信息加 ...
- 追求极致--纯css制作三角、圆形按钮,兼容ie6
参考了天猫.微博等网站的做法,用纯html和css实现,效果还是不错的.以下是成果,兼容主流浏览器,包括ie6. <!DOCTYPE html PUBLIC "-//W3C//DTD ...
- 纯CSS实现移动端常见布局——高度和宽度挂钩的秘密
纯CSS实现移动端常见布局--高度和宽度挂钩的秘密 不踩坑不回头.之前我在一个项目中大量使用css3的calc计算属性.写代码的时候真心不要太爽啊-可是在项目上线之后,才让我崩溃了,原因非常easy, ...
- 纯css实现table表格固定列和表头,中间横向滚动的思路-附案例
最近做的后台管理系统要处理大量的表格 原项目是采用的for循环加拼接字符串的方式实现;导致js代码一大堆;各种单引号和双引号的嵌套;让人头疼;遂引入vue.js;用v-for做模板渲染;工作量顿时减轻 ...
- 超强的纯 CSS 鼠标点击拖拽效果
背景 鼠标拖拽元素移动,算是一个稍微有点点复杂的交互. 而在本文,我们就将打破常规,向大家介绍一种超强的仅仅使用纯 CSS 就能够实现的鼠标点击拖拽效果. 在之前的这篇文章中 -- 不可思议的纯 CS ...
- CSS布局技巧 -- 纯CSS让子元素的宽度总和决定其父元素的宽度
使用场景 在移动端屏幕宽度有限的前提下,使用横向滚动的方式展示更多的内容.在这样的需求下,希望父元素作为容器,其宽度可以又横向排列资源的总宽度动态撑开,超过祖父元素的宽度:在不超过祖父元素时,自动继承 ...
- 分享:纯 css 瀑布流 和 js 瀑布流
分享一次纯 css 瀑布流 和 js 瀑布流 纯 css 写瀑布流 1.multi-columns 方式: 通过 Multi-columns 相关的属性 column-count.column-ga ...
随机推荐
- HTML+CSS教程(一)简介及其基本标签的使用方法
一.前端 HTML(结构):HyPer TEXT Markup LanguageCSS(样式): 样式就是对于结构的一种美化JavaScript(js: 行为/ 提供了用户和界面的交互方式)jQuer ...
- ASP.Net内置对象之网页之间传参(二)
Session对象 运用于多个界面调用某一个特定的用户信息,也就是每个Session 对象是独立的,个不受影响. Session对象的读取和存储 Session[name]=”chen”; 可以用来界 ...
- 从零开始建图床 minio
图床 图床可以参考知乎这篇文章 一些小众图床有空空间免费,但不知道什么时候会挂掉.前些年用过的极简图床,现在也销声匿迹: 大厂提供的有限免费空间,七牛云10G空间,10Gb/月 流量免费:但如果使用h ...
- 支付宝开源非侵入式 Android 自动化测试工具 Soloπ
Soloπ(SoloPi)是支付宝开源的一个无线化.非侵入式的Android自动化测试工具,公测版拥有录制回放.性能测试.一机多控三项主要功能,能为测试开发人员节省宝贵时间. 本文是SoloPi团队关 ...
- Java中StringBuffer类
StringBuffer: 线程安全的可变字符串. StringBuffer和String的区别?前者长度和内容可变,后者不可变.如果使用前者做字符串的拼接,不会浪费太多的资源. StringBuff ...
- Java类的使用
在一个Java文件中写两个类:一个基本的类,一个测试类.注意:文件名称和测试类名称一致. 如何使用呢?创建对象使用.如何创建对象呢?格式:类名 对象名 = new 类名(); Student s = ...
- 干货最实用的 Python 多线程代码框架
前言 很多地方都要用到多线程,这是我经常用的多线程代码,放在博客园记录下. 代码 from multiprocessing.pool import ThreadPool thread = 10 ite ...
- Vue【你知道吗?】
前言 Vue的由来 Vue最早发布于2014年左右,作者是美中国学生尤雨溪.Vue 的定位就是为前端开发提供一个低门槛,高效率,但同时又能够伴随用户成长的框架 尤雨溪谈Vue.js :缔造自由与真我 ...
- 某拍sig算法揭秘---50行代码下载5000万小姐姐自拍小视频
背景: 首先我们需要一点点python基础,比如可以运行类似下面的代码 import requests headers={ "xxx":"xxx", ...
- Nginx模块开发(3)————使用upstream访问第三方服务
该模块可以完成如下的功能,当我们输入http://你的ip/lcwupstream时,会使用upstream方式访问淘宝搜索,打开淘宝搜索的主页面,代码如下: //start from the ver ...