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 ...
随机推荐
- mysql数据库 删除某几个字段相同的重复记录并根据另一字段留下一条记录
1.例如Mysql数据库中表a中的记录,id=2,id=6,id=7的记录是重复的(iId,cId等多个字段相同),现在想留下id最小(id=2)或最大(id=7)的一条记录
- windows bat 批处理 执行 for 循环无法执行？
示例: cmd 命令行可以执行.但是 写成 bat 却不能执行, for /f "delims==" %a in ('dir /b /s F:\F\*.TXT')do copy ...
- javac编译多个java文件以及-cp、-classp、-sourcepath
//编译多个文件 javac path_of_file_a/a.java path_of_file_b/b.java path_of_file_c/c.java -cp(classpath) 与 ...
- BUAA-OO-电梯调度
BUAA-OO-电梯调度 1.设计策略 需求分析 设计一个系统,使其可以根据乘客的当前楼层和目的楼层,为乘客分配电梯资源并运送其至目的楼层. 自顶向下 根据需求,可以将整个系统分成三个部分: 处理乘客 ...
- 如何局部覆盖element-ui的默认样式
- vue eventBus 跳坑的办法
前言(feihua): 最近闲来没事写了一个小的demo,在小的数据传输上没有必要去使用vuex,对于非父子组件的传值方法总结了一点心得体会供大家参考(如有太low,还请大神别喷俺) 先上官方文档: ...
- es集群数据库~运维相关
一 数据同步方案 1 ES-JDBC 不能实现删除同步操作.MYSQL如果删除,ES不会删除 2 logstash-input-jdbc 能实现insert update,但是仍然不能实现删除 ...
- 20175315 实验二《Java面向对象程序设计》实验报告
20175315 实验二<Java面向对象程序设计>实验报告 一.实验内容及步骤 1.初步掌握单元测试和TDD 单元测试 任务一:三种代码 用程序解决问题时,要学会写以下三种代码: 伪代码 ...
- 【easy】107. Binary Tree Level Order Traversal II 按层输出二叉树
按层输出二叉树,广度优先. 3 / \ 9 20 / \ 15 7 [ [15,7], [9,20], [3] ] /** * Definition for a binary tree node. * ...
- 记一次较坑的eclipse安装AmaterasUML插件经历
先是最开始以为只用下载AmaterasUML插件压缩包,解压之后把三个jar包放进eclipse-plugins目录之后重启就可以了,结果发现重启之后毫无反应orz 于是又去查资料,发现还需要安装GE ...