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 相关文章推荐
25个CSS3动画按钮和菜单教程分享
Oct 03 HTML / CSS
如何利用CSS3制作3D效果文字具体实现样式
May 02 HTML / CSS
CSS3之背景尺寸Background-size使用介绍
Oct 14 HTML / CSS
CSS3条纹背景制作的实战攻略
May 31 HTML / CSS
使用CSS3的ruby-position固定注音位置的用法示例
Jul 05 HTML / CSS
利用纯CSS3实现tab选项卡切换示例代码
Sep 21 HTML / CSS
浅谈CSS3 box-sizing 属性 有趣的盒模型
Apr 02 HTML / CSS
CSS实现半透明边框与多重边框的场景分析
Nov 13 HTML / CSS
HTML5 贪吃蛇游戏实现思路及源代码
Sep 03 HTML / CSS
用html5的canvas和JavaScript创建一个绘图程序的简单实例
Jul 06 HTML / CSS
CSS实现单选折叠菜单功能
Nov 01 HTML / CSS
clear 万能清除浮动(clearfix:after)
May 21 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和ACCESS写聊天室(九)
2006/10/09 PHP
在项目中寻找代码的坏命名
2012/07/14 PHP
php对二维数组按指定键值key排序示例代码
2013/11/26 PHP
PHP、Python和Javascript的装饰器模式对比
2015/02/03 PHP
php有效防止同一用户多次登录
2015/11/19 PHP
PHP+sqlite数据库操作示例(创建/打开/插入/检索)
2016/05/26 PHP
在vs2010中调试javascript代码方法
2011/02/11 Javascript
文本框输入时 实现自动提示(像百度、google一样)
2012/04/05 Javascript
js异常捕获方法介绍
2013/04/10 Javascript
深入剖析JavaScript中的枚举功能
2014/03/06 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
使用jQuery实现input数值增量和减量的方法
2015/01/24 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
2016/12/01 Javascript
原生js封装自定义滚动条
2017/03/24 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
2017/09/18 Javascript
echarts饼图扇区添加点击事件的实例
2017/10/16 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
2018/09/03 Javascript
JavaScript 判断iPhone X Series机型的方法
2019/01/28 Javascript
angular2 NgModel模块的具体使用方法
2019/04/10 Javascript
webpack.DefinePlugin与cross-env区别详解
2020/02/23 Javascript
详解Vue Cli浏览器兼容性实践
2020/06/08 Javascript
[01:55]《走出家门看比赛》——DOTA2 2015国际邀请赛同城线下观战
2015/07/18 DOTA
跟老齐学Python之集合(set)
2014/09/24 Python
用map函数来完成Python并行任务的简单示例
2015/04/02 Python
Python方法的延迟加载的示例代码
2017/12/18 Python
python+selenium打印当前页面的titl和url方法
2018/06/22 Python
Python数据预处理之数据规范化(归一化)示例
2019/01/08 Python
python多进程读图提取特征存npy
2019/05/21 Python
pycharm 2018 激活码及破解补丁激活方式
2020/09/21 Python
美国男士西装打折店:Jos. A. Bank
2017/11/13 全球购物
门卫工作岗位职责
2013/12/17 职场文书
2014年团支部工作总结
2014/11/17 职场文书
毕业生学校组织意见
2015/06/04 职场文书
2016年“我们的节日·重阳节”主题活动总结
2016/04/01 职场文书
历史名人教你十五个读书方法,赶快Get起来!
2019/07/18 职场文书
MySQL 条件查询的常用操作
2022/04/28 MySQL