vue+css 写一个时间轴

<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的孩子

效果图 

标签：flex,vue,10n,li,nth,28px,时间轴,height,css
来源： https://blog.csdn.net/m0_49789433/article/details/120851301