您现在的位置是：网站首页> 编程资料编程资料

CSS3田字格列表的样式编写方法css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果

2023-10-19 227人已围观

简介这篇文章主要介绍了CSS3田字格列表的样式编写方法的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

在很多项目中，需要实现分格展示的功能，中间有灰色分割线，两侧没有。

如图：

按照一般的思路，设置好li的宽度，通过nth-of-type(n){}的方式给li标签添加样式。

设置每个li 33.33%的宽度，但当我们添加1px边框时，最右边的内容就被挤了下来。

这时可以通过给父级 ul 添加:before :after 伪类元素来实现。而不占用li的width

当显示3列时，通过给ul 添加:before来实现

CSS

HTML

香港
澳门
台湾
曼谷
新加坡
首尔
东京
济州岛
芭堤雅

当显示4列时，给:after添加样式，注意需要更改li的width、.mp-list:before的位置。

 .mp-list:after { content: ''; position: absolute; width: 10%; left: 75%; height: 100%; border-left: .02rem solid #ddd; border-right: 0; }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。