css 控制横向布局，超出隐藏，滚动
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
li{
list-style: none;
}
.box1{
width: 400px;
height: 100px;
overflow-y: hidden;
overflow-x: scroll;
/* position: relative; */
}
.box2{
display: flex;
/* position: absolute; */
}
.box2 li{
width: 50px;
height: 50px;
flex-shrink: 0;
line-height: 50px;
background: red;
margin: 15px;
text-align: center;
color: #fff;
}
</style>
</head>
<body>
<div class="box1">
<ul class="box2">
<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>10</li>
</ul>
</div>
</body>
</html>
代码中，第一种可以使用 position: absolute;给box2，其父元素使用相对定位，使得box2的子元素可以横向滚动，改变display:flex布局的自适应；
第二种是使用 flex-shrink: 0; 让其display:flex；不在收缩宽度；
css 控制横向布局，超出隐藏，滚动的更多相关文章
- css控制div显示／隐藏方法及２种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET
body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...
- CSS控制文字，超出部分显示省略号
http://www.daqianduan.com/6179.html <p style="width: 300px;overflow: hidden;white-space: now ...
- css控制标题长度超出部分显示省略号
width: 50px; overflow:hidden;white-space:nowrap; text-overflow:ellipsis; 设置或检索是否使用一个省略标记(...)标示对象内文本 ...
- css强制换行和超出隐藏实现
一.强制换行1 word-break: break-all; 只对英文起作用,以字母作为换行依据. 2 word-wrap: break-word; 只对英文起作用,以单词作为换行依据. 3 ...
- css控制滚动条的出现隐藏导致的页面闪动的问题
之前这些小细节都在实践的时候给忽视了,或者都动态加载,框架的使用等因素的隐藏,变得不那么容易出现. 今天看到张鑫旭大牛的微博,觉得记录一下这个小问题的解决方案 <div style=" ...
- css 解决fixed 布局下不能滚动的问题
如果我们布局的是后是fixed并且想要高度为100%的时候,我们一般会这样设置: div { display:fixed; height:%; overflow:scroll; } 但是这样并不会出现 ...
- CSS - 控制最后边框的隐藏或设置为none
div{ width: 20%; border-left: 1px solid $border-color; &:nth-child(5n+1){ ...
- CSS多行文字超出隐藏加省略号
overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 限制行数 overflow: hidden; text-overflow: ...
- CSS 控制table 滑动及调整列宽等问题总结
一. 通过css控制table y方向上滚动 html中没有滚动条,可以根据overflow属性的scroll来对table显示不完全的内容进行滚动. 只是y方向上滚动,很简单,只要设置div的hei ...
随机推荐
- js同步、异步、延时、无阻塞加载
一.同步加载 平常默认用的都是同步加载.如:<script src="http://yourdomain.com/script.js"></script> ...
- Python编程四大神兽：迭代器、生成器、闭包和装饰器
生成器 生成器是生成一个值的特殊函数,它具有这样一个特点:第一次执行该函数时,先从头按顺序执行,在碰到yield关键字时该函数会暂停执行该函数后续的代码,并且返回一个值:在下一次调用该函数执行时,程序 ...
- java abs(绝对值) , max(最大值),min(最小值) 方法的应用
在写程序是,我们常常会计算一个数的绝对值,这时我们可以使用java里的方法来计算 public class Demo1{ public static void main(String [] args) ...
- flask学习（二）
一.蓝图 作用:给开发者提供目录结构 功能:1.自定义模板.静态文件目录 2.给一类url加前缀 3.给一类url添加before_request 目录结构 from flask_werkzur ...
- 有趣的 zkw 线段树（超全详解）
zkw segment-tree 真是太棒了(真的重口味)!写篇博客纪念入门 emmm...首先我们来介绍一下 zkw 线段树这个东西(俗称 "重口味" ,与 KMP 类似,咳咳. ...
- ajax上传文件显示进度
下面要做一个ajax上传文件显示进度的操作,文末有演示地址 这里先上代码: 1.前端代码 upload.html <!DOCTYPE html> <html lang="e ...
- QT学习之解决QT中QIcon图标不显示的问题
第一种:图标存放目录问题 :/文件夹名称/文件名 如:文件夹为:/img 文件名为:a.png 路径: :/img/a.png 这里注意前面的":". 第二种:编译生成 ...
- Python logging日志系统
写我小小的日志系统 配置logging有以下几种方式: 1)使用Python代码显式的创建loggers, handlers和formatters并分别调用它们的配置函数: 2)创建一个日志配置文件, ...
- Oracle数据安全解决方案（1）——透明数据加密TDE
Oracle数据安全解决方案(1)——透明数据加密TDE2009年09月23日 22:49:00 华仔爱技术 阅读数:7991原文地址: http://www.oracle.com/technolog ...
- axios 拦截器统一在接口增加时间戳参数，防止走缓存。
request.interceptors.request.use( config => { if (config.method == 'post') { config.data = { ...c ...