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实现图片无间断轮播效果
Aug 25 HTML / CSS
实列教程 一款基于jquery和css3的响应式二级导航菜单
Nov 13 HTML / CSS
使用CSS3的font-face字体嵌入样式的方法讲解
May 13 HTML / CSS
使用CSS3 制作一个material-design 风格登录界面实例
Dec 12 HTML / CSS
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
Feb 07 HTML / CSS
CSS3关于z-index不生效问题的解决
Feb 19 HTML / CSS
html5 canvas绘制放射性渐变色效果
Jan 04 HTML / CSS
html5记忆翻牌游戏实现思路及代码
Jul 25 HTML / CSS
教你使用Canvas处理图片的方法
Nov 28 HTML / CSS
Html5百叶窗效果的示例代码
Dec 11 HTML / CSS
HTML5 新表单类型示例代码
Mar 20 HTML / CSS
如何使用 resize 实现图片切换预览功能
Aug 23 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
PHP读取文件的常见几种方法
2016/11/03 PHP
CI(CodeIgniter)框架视图中加载视图的方法
2017/03/24 PHP
thinkPHP5.0框架事务处理操作简单示例
2018/09/07 PHP
PHP7引入的&quot;??&quot;和&quot;?:&quot;的区别讲解
2019/04/08 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
JavaScript URL参数读取改进版
2009/01/16 Javascript
javascript中this做事件参数相关问题解答
2013/03/17 Javascript
JavaScript继承模式粗探
2016/01/12 Javascript
JS验证逗号隔开可以是中文字母数字
2016/04/22 Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
2017/03/01 Javascript
jsonp跨域及实现百度首页联想功能的方法
2018/08/30 Javascript
利用React Router4实现的服务端直出渲染(SSR)
2019/01/07 Javascript
关于vue状态过渡transition不起作用的原因解决
2019/04/09 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
2020/03/07 Javascript
Bootstrap table 服务器端分页功能实现方法示例
2020/06/01 Javascript
python多线程抓取天涯帖子内容示例
2014/04/03 Python
Python解析网页源代码中的115网盘链接实例
2014/09/30 Python
浅谈python中拼接路径os.path.join斜杠的问题
2018/10/23 Python
pandas.DataFrame的pivot()和unstack()实现行转列
2019/07/06 Python
python ctypes库2_指定参数类型和返回类型详解
2019/11/19 Python
基于python实现对文件进行切分行
2020/04/26 Python
Python实现中英文全文搜索的示例
2020/12/04 Python
python实现无边框进度条的实例代码
2020/12/30 Python
Django权限控制的使用
2021/01/07 Python
New Balance美国官网:运动鞋和健身服装
2017/04/11 全球购物
联想英国官网:Lenovo英国
2019/07/17 全球购物
EM Cosmetics官网:由彩妆大神Michelle Phan创办的独立品牌
2020/04/27 全球购物
车间班长岗位职责
2013/11/30 职场文书
安全生产检讨书
2014/01/21 职场文书
十一酒店活动方案
2014/02/20 职场文书
励志演讲稿3分钟
2014/08/21 职场文书
教师党员批评与自我批评发言稿
2014/10/15 职场文书
死亡证明书样本说明
2014/10/18 职场文书
2014年残疾人工作总结
2014/12/06 职场文书
2014年骨干教师工作总结
2014/12/19 职场文书
如何用python插入独创性声明
2021/03/31 Python