<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.fa {
width: 200px;
display: flex;
justify-content: space-between;
white-space: nowrap;
overflow-y: hidden;
overflow-x: scroll;
}
.son {
padding: 12.8px 0 12.8px 0;
margin-right: 19.2px;
background: tomato;
}
.scrollBox {
height: 500px;
overflow-x: scroll;
/* 内容会被裁剪,会以滚动条显示 */
overflow-y: hidden;
/* 超出内容不可见 */
white-space: nowrap;
/* 不换行 */
/* 文本不会换行,会在同一行上继续,直到遇到<br>为止 */
}
.blockDiv {
width: 340px;
margin-right: 10px;
display: inline-table;
background: tomato;
height: 500px;
/* 不换行 */
}
</style>
</head>
<body>
<div class="fa">
<div class="son">1111111</div>
<div class="son">22222222</div>
<div class="son">3333333333</div>
<div class="son">4444444444</div>
<div class="son">666666666</div>
</div>
<div class="scrollBox">
<div class="blockDiv">
</div>
<div class="blockDiv">
</div>
<div class="blockDiv">
</div>
<div class="blockDiv">
</div>
<div class="blockDiv">
</div>
<div class="blockDiv">
</div>
<div class="blockDiv">
</div>
<div class="blockDiv">
</div>
<div class="blockDiv">
</div>
</div>
</body>
</html>
以上方法是错的,其实是通过white:space 伪实现(子盒子宽不写死)
下面是真正的实现(子盒子的宽固定)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.box1 {
width: 320px;
height: 60px;
overflow: hidden;
/* 超出隐藏滚动条 */
background-color: skyblue;
}
.box1 .wrap {
width: 320px;
/* 和父盒子宽度一样 */
height: 76px;
/* 比里层元素高16px 为了隐藏滚动条*/
overflow-x: scroll;
/* 定义超出此盒子滚动 */
overflow-y: hidden;
}
.box1 .wrap ul {
width: 640px;
display: flex;
}
.box1 .wrap ul li {
flex: 1;
width: 60px;
height: 60px;
box-sizing: border-box;
}
</style>
<body>
<div class="box1">
<div class="wrap">
<ul>
<li>1移动端</li>
<li>2可滑动</li>
<li>3ie8以上</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
</body>
</html>
更加完美,flex适应子盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.box1 {
width: 320px;
height: 60px;
overflow: hidden;
/* 超出隐藏滚动条 */
background-color: skyblue;
}
.box1 .wrap {
width: 320px;
/* 和父盒子宽度一样 */
height: 76px;
/* 比里层元素高16px 为了隐藏滚动条*/
overflow-x: scroll;
/* 定义超出此盒子滚动 */
overflow-y: hidden;
}
.box1 .wrap ul {
/* width: 640px; */
display: flex;
}
.box1 .wrap ul li {
/* flex: 1; */
width: 80px;
height: 60px;
flex-shrink: 0;
box-sizing: border-box;
}
</style>
<body>
<div class="box1">
<div class="wrap">
<ul>
<li>1移动端</li>
<li>2可滑动</li>
<li>3ie8以上</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
<script>
// let promise = new Promise(function (resolve, reject) {
// // 当 promise 被构造完成时,自动执行此函数
// // 1 秒后发出工作已经被完成的信号,并带有结果 "done"
// setTimeout(() => {
// console.log(1)
// }, 1000)
// resolve()
// })
// promise.then(() => {
// console.log(2)
// })
async function a() {
let b = await setTimeout(() => {
console.log(1)
}, 200)
console.log(2)
}
a()
</script>
</body>
</html>