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 ...
随机推荐
- [Jetty] Debugging With Eclipse
There are a number of options available to debug your application in Eclipse. If not done already pr ...
- H5富文本编辑器之初始化用于编辑的DOM-遁地龙卷风
使用H5的全局属性contenteditable可以让DOM元素及其子元素变的可编辑 <div contenteditable id="editor"> </di ...
- 风火轮SMC532使用
2018年3月份申请了一个院创,要做一个基于NFC技术的考勤设备,想法是用手机的NFC将学号信息传导考勤机,由考勤机统计缺勤信息,因为自己的拖延症,一直拖到现在.现在一边写毕业论文一边准备院创答辩,又 ...
- 第一章Java学习（查漏补缺）
第一章主要内容: 1.Java的地位:网络地位 语言地位 需求地位 2.Java的特点:①简单 面向对象 平台无关:软件的运行不因操作系统,处理器的变化而无法运行或出现运行错误. ②多线程 动态 3. ...
- 变分自编码器（Variational Autoencoder, VAE）通俗教程
原文地址:http://www.dengfanxin.cn/?p=334 1. 神秘变量与数据集 现在有一个数据集DX(dataset, 也可以叫datapoints),每个数据也称为数据点.我们假定 ...
- ubuntu常用命令及操作，包括安装CUDA
chmod Document 这里Document是一个文件夹,文件夹中还有好多子文件,可以发现执行了这条指令以后,其子文件夹的权限并没有改变. 要想改变其子文件夹的权限,应该执行 Document/ ...
- Uni-app页面生命周期
学习任何框架必须将其生命周期了然于胸. uni-app支持如下页面生命周期函数: onLoad 监听页面加载,其参数为上个页面传递的数据,参数类型为object(用于页面传参),示例中可参考 onSh ...
- IntelliJ IDEA重启Tomcat
- Ajax原理一篇就够了
Ajax原理一篇就够了 一.什么是Ajax Ajax(Asynchronous JavaScript and XML的缩写)是一种异步请求数据的web开发技术,对于改善用户的体验和页面性能很有帮助.简 ...
- Python安装xlrd和xlwt的步骤以及使用报错的解决方法
一.安装xlrd和xlwt功能模块步骤 1.使用python -V查看python的版本号,并查看python安装环境,是否安装成功: 2.可以通过官网(python官网:https://pypi ...