css 控制横向布局,超出隐藏,滚动
一、第一种方法
< html lang="en" dir="ltr"> < head > < meta charset="utf-8"> < 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; } < body > < div class="box1"> < ul class="box2"> < li >1 < li >2 < li >3 < li >4 < li >5 < li >6 < li >7 < li >8 < li >9 < li >10
二、第二种方法
<!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;
line-height: 50px;
background: red;
margin: 15px;
text-align: center;
color: #fff;
/* flex-shrink: 0; */
}
</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;不在收缩宽度;
作者:freddyhuang
出处:https://www.cnblogs.com/freddyhuang
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。