css实现ul下一组li高度递增

本文主要是介绍css实现ul下一组li高度递增，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

css实现ul下一组li高度递增

实现效果如图：

代码：

ul {list-style: none;display: flex;align-items: baseline;justify-content: space-between;
}
li {width: 50px;background: #000;
}
@for $i from 1 through 10 {li:nth-child(#{$i}) {height: calc(#{$i} * 20px);}

这里使用的是sass预编译下的for循环语法

这篇关于css实现ul下一组li高度递增的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---