<template >
<div>
<ul>
<li v-for="(item,index) in 220" :key="index"> </li>
</ul>
</div>
</template>
<style >
body{
background: gray;
margin: 0px;
padding: 0px
}
ul{
display: flex;
align-items: flex-end; /* 下方对齐 */
justify-content: space-around; /* 分布居中 */
}
li{
list-style: none;
height: 20px;
width: 1px;
background: white;
}
li:nth-child(10n){
height: 28px;
}
</style>
li:nth-child(10n){
height: 28px;
}
这块是核心 10n代表n个10的孩子
效果图