CSS3田字格列表的样式编写方法
前端 / 管理员 发布于 7年前 198
在很多项目中,需要实现分格展示的功能,中间有灰色分割线,两侧没有。
如图:
按照一般的思路,设置好li的宽度,通过nth-of-type(n){}的方式给li标签添加样式。
设置每个li 33.33%的宽度,但当我们添加1px边框时,最右边的内容就被挤了下来。
这时可以通过给父级 ul 添加:before :after 伪类元素来实现。而不占用li的width
当显示3列时,通过给ul 添加:before来实现
CSS
<style> ul li{ list-style: none;} .mp-list{ position: relative;overflow: hidden;z-index: 0;background-color: #fff; } .mp-list:before {content: '';position: absolute;width: 33.33%;left: 33.33%;height: 100%;border-left: .02rem solid #ddd;border-right: .02rem solid #ddd; } .mp-list li {width: 33.33%;height: 2rem;line-height: 2rem;font-size: .28rem;text-align: center;border-bottom: .02rem solid #ddd;margin-bottom: -1px;float: left;position: relative;z-index: 10;color: #212121; } .mp-list li a {color: #212121;display: block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: .28rem; } </style>
HTML
<ul class="mp-list"> <li><a hybrid-link="" href="" title="">香港</a></li> <li><a hybrid-link="" href="" title="">澳门</a></li> <li><a hybrid-link="" href="" title="">台湾</a></li> <li><a hybrid-link="" href="" title="">曼谷</a></li> <li><a hybrid-link="" href="" title="">新加坡</a></li> <li><a hybrid-link="" href="" title="">首尔</a></li> <li><a hybrid-link="" href="" title="">东京</a></li> <li><a hybrid-link="" href="" title="">济州岛</a></li> <li><a hybrid-link="" href="" title="">芭堤雅</a></li></ul>
当显示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;}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
122 在
学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
Copyright·© 2019 侯体宗版权所有·
粤ICP备20027696号