CSS3田字格列表的样式编写方法


Posted in HTML / CSS onNovember 22, 2018

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

如图:

CSS3田字格列表的样式编写方法

按照一般的思路,设置好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;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
基于CSS3特效之动画:animation的应用
May 09 HTML / CSS
基于Jquery和Css3代码制作可以缩放的搜索框
Nov 19 HTML / CSS
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
Aug 25 HTML / CSS
CSS3绘制六边形的简单实现
Aug 25 HTML / CSS
使用css3做0.5px的细线的示例代码
Jan 18 HTML / CSS
Html5之svg可缩放矢量图形_动力节点Java学院整理
Jul 17 HTML / CSS
使用HTML5拍照示例代码
Aug 06 HTML / CSS
html5使用canvas画三角形
Dec 15 HTML / CSS
在HTML5中使用MathML数学公式的简单讲解
Feb 19 HTML / CSS
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
Dec 03 HTML / CSS
HTML5自定义元素播放焦点图动画的实现
Sep 25 HTML / CSS
html,css,javascript是怎样变成页面的
May 07 HTML / CSS
纯css3实现思维导图样式示例
Nov 01 #HTML / CSS
CSS3 Flex 弹性布局实例代码详解
Nov 01 #HTML / CSS
CSS3 创建网页动画实现弹跳球动效果
Oct 30 #HTML / CSS
css3实现椭圆轨迹旋转的示例代码
Oct 29 #HTML / CSS
纯css3实现宠物小鸡实例代码
Oct 08 #HTML / CSS
使用纯 CSS 创作一个脉动 loader效果的源码
Sep 28 #HTML / CSS
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
Sep 10 #HTML / CSS
You might like
CakePHP去除默认显示的标题及图标的方法
2008/10/22 PHP
PHP实现的自定义图像居中裁剪函数示例【测试可用】
2017/08/11 PHP
有效的捕获JavaScript焦点的方法小结
2009/10/08 Javascript
js或css实现滚动广告的几种方案
2010/01/28 Javascript
JSQL 批量图片切换的实现代码
2010/05/05 Javascript
javascript的console.log()用法小结
2012/05/31 Javascript
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
2013/01/15 Javascript
angularjs中的单元测试实例
2014/12/06 Javascript
javascript实现Table排序的方法
2015/05/15 Javascript
全国省市二级联动下拉菜单 js版
2016/05/10 Javascript
分享jQuery封装好的一些常用操作
2016/07/28 Javascript
AngularJS入门教程之路由与多视图详解
2016/08/19 Javascript
javascript淘宝主图放大镜功能
2016/10/20 Javascript
基于JavaScript实现移动端无限加载分页
2017/03/27 Javascript
微信小程序 chooseImage选择图片或者拍照
2017/04/07 Javascript
JavaScript之iterable_动力节点Java学院整理
2017/06/29 Javascript
详解动画插件wow.js的使用方法
2017/09/13 Javascript
Vue props用法详解(小结)
2018/07/03 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
2019/07/22 Javascript
layui之table checkbox初始化时选中对应选项的方法
2019/09/02 Javascript
简单的Python的curses库使用教程
2015/04/11 Python
Python3多线程爬虫实例讲解代码
2018/01/05 Python
python批量导入数据进Elasticsearch的实例
2018/05/30 Python
浅谈Python 列表字典赋值的陷阱
2019/01/20 Python
python机器学习包mlxtend的安装和配置详解
2019/08/21 Python
PyQT5速成教程之Qt Designer介绍与入门
2020/11/02 Python
Bobbi Brown芭比波朗美国官网:化妆师专业彩妆保养品品牌
2016/08/18 全球购物
名词解释型面试题(主要是网络)
2013/12/27 面试题
行政部总经理岗位职责
2014/01/04 职场文书
九年级体育教学反思
2014/01/23 职场文书
绘画专业自荐信范文
2014/02/23 职场文书
物理学专业自荐信
2014/06/11 职场文书
机关领导查摆四风思想汇报
2014/09/13 职场文书
职业生涯规划书怎么写?
2014/09/14 职场文书
党员干部公开承诺书范文
2015/04/27 职场文书
奖学金发言稿(范文)
2019/08/21 职场文书