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 ...
随机推荐
- torchvision 作用
1. 提供主流的model,和常用数据集 2. 对 torch.utils.data.Dataset进行扩充,针对不同类别图像放入不同文件夹的数据进行读取, torchvision.datasets. ...
- ultraEdit软件比较两个文件内容的不同处
1.软件名称为:UltraEdit ,安装并打开软件; 软件图标: 打开软件如图所示: 2.点击导航图标,蓝色上面有Uc图标,该图标名称为“比较文件” 如图位置: 3.弹出框,根据文件路径选择好比较的 ...
- 内网环境上部署k8s+docker集群：集群ftp的yum源配置
接触docker已经有一年了,想把做的时候的一些知识分享给大家. 因为公司机房是内网环境无法连接外网,所以这里所有的部署都是基于内网环境进行的. 首先,需要通过ftp服务制作本地的yum源,可以从ht ...
- redis批量灌库
需求:将批量数据灌入redis中 如果通过代码形式将数据灌入redis中,效率比较低,以下将根据redis的特性进行快速的批量灌库 环境:centos7 将数据整理成规定格式的文件,比如: SET k ...
- CNN的反向传播
在一般的全联接神经网络中,我们通过反向传播算法计算参数的导数.BP 算法本质上可以认为是链式法则在矩阵求导上的运用.但 CNN 中的卷积操作则不再是全联接的形式,因此 CNN 的 BP 算法需要在原始 ...
- 7zip，命令行解压报错：7-Zip cannot find the code that works with archives.
简单的命令: 7z x zipfile.7z 7-Zip 9.20 Copyright (c) 1999-2010 Igor Pavlov 2010-11-18 Error: 7-Zip cannot ...
- 使用SpringSecurity体验OAUTH2之一 (入门1）
OAUTH2是一种安全的授权框架,其原理在网上有许多文章上可以看到.但从实践角度,好的文章比较少.SpringSecurity框架本身是支持OAUTH2的,所以下面通过使用SpringSecurity ...
- python笔记06-10
作者:Vamei 出处:http://www.cnblogs.com/vamei 基础06 循环 for循环 举例: range的用法 这个函数的功能是新建一个表.这个表的元素都是整数,从0开始,下 ...
- jmeter测试报告分析
转载:http://www.cnblogs.com/miaomiaokaixin/p/6118081.html 在cmd中用命令行执行jmeter脚本: jmeter地址 -n -t 脚本地址 ...
- 【easy】437. Path Sum III 二叉树任意起始区间和
/** * Definition for a binary tree node. * struct TreeNode { * int val; * TreeNode *left; * TreeNode ...