ul、li 标签实现完美表格

第一种是没有缺口的，如下图

第二种是有缺口的，如下图

两种表格的最大特点就是不用给表格里的每个 li 元素都单独设置 css 样式，要用的时候直接闭着眼睛循环 li 标签即可。

第一种的特点是

1、内边框的大小是一致的。

2、内边框的大小和外边框的大小可以分别设置。

3、内边框和外边框的颜色可以分别设置。

4、每个小方框的白色部分大小是一致的（空缺部分不算）。

第二种的特点是

1、空缺部分可以不用被方框包裹。

2、内边框的大小是一致的。

3、内边框和外边框的颜色要一致（要不然不好看）。

4、内边框的大小和外边框的大小要一致（要不然不好看）。

5、每个小方框的白色部分大小是一致的。

第一种实现

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin:0;padding:0;}ul{width: 500px;margin: 200px auto;border: 10px solid red;overflow: hidden;}ul li{float: left;list-style: none;width: 92px;height: 100px;border-right: 10px solid blue;border-bottom: 10px solid blue;margin-bottom: -10px;}li:nth-child(5)~li{padding-top: 10px;}li:nth-child(5n){border-right: none;}</style>
</head>
<body><ul><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">6</a></li><li><a href="#">7</a></li><li><a href="#">8</a></li><li><a href="#">9</a></li><li><a href="#">10</a></li><li><a href="#">11</a></li><li><a href="#">11</a></li><li><a href="#">11</a></li><li><a href="#">11</a></li><li><a href="#">11</a></li><li><a href="#">11</a></li><li><a href="#">11</a></li><li><a href="#">11</a></li>
</ul></body>
</html>

原理

1、给每个 li 元素设置负的 margin-bottom，这样每个 li 元素底部的元素会往上跑，导致每个 li 元素的底部边框重叠在一起。

2、因为第一步的操作，从二行开始的 li 元素的可视区高度会减少，所以要给第二行开始的每个 li元素设置一个 padding-top（撑开第二行开始的每个 li元素的高度），这样可以使第二行开始的每个 li 元素的可视区高度和第一行 li元素的可视区高度相等，还可以使第二行开始的每个 li 元素的子元素的位置和第一行 li 元素的子元素的位置相等（利用 li:nth-child(5)~li）。

3、对每一行最右边的 li 元素进行处理，使每一行最后边的 li 元素的右边框设置成 none （利用 li:nth-child(5n) ）。

第二种实现

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin:0;padding:0;}ul{width: 510px;margin: 200px auto;border-top: 10px solid red;border-left: 10px solid red;overflow: hidden;}li{float: left;list-style: none;width: 92px;height: 100px;border-right: 10px solid blue;border-bottom: 10px solid blue;}</style>
</head>
<body><ul><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">6</a></li><li><a href="#">7</a></li><li><a href="#">8</a></li><li><a href="#">9</a></li><li><a href="#">10</a></li><li><a href="#">11</a></li><li><a href="#">11</a></li><li><a href="#">11</a></li><li><a href="#">11</a></li><li><a href="#">11</a></li><li><a href="#">11</a></li><li><a href="#">11</a></li><li><a href="#">11</a></li></ul>
</body>
</html>

原理

没啥原理，一看就懂。

ul、li 标签实现完美表格相关推荐

CSS样式 ul li 标签的坑
CSS样式中 ul li 标签设置出现下列问题以及解决方法,为了自己方便,谁若是不小心点击来了,见谅 1.上面这个原因是li标签内的图片设置宽度,有可能出现的BUG,解决方案很简单将图片设置的宽 ...
HTML上的ul li标签消除,去掉ul li 前面的点与空白（div+css）
如果直接在网页用 ul li 标签,默认情况下有一个小黑点,并且每个li前面还有一段空白,尤其是li中包括图片的情况.为什么会出现这种情况?ul li 是 html 中的列表标签,所以默认每个li前面 ...
取消html中ul li标签前面的小圆点
html中ul li标签默认样式带小圆点,将list-style-type设置为none <ul><li class="company" style=" ...
css去掉 ul li标签的前的点
开发中ul li标签前默认存在一个小点,去掉默认点使用list-style-type: none;即可 list-style-type: none;
ul li标签去掉前面的点
主要在css加这句话:list-style-type: none; <ul class="nyTab"><liv-for="(item, index) ...
点号“·”的显示替代 ul li 的功能
<ul> <li> This is Point Test. </li> </ul> 以上代码放入HTML的Body之后, 会出现 · This is P ...
使用ul li和不适用ul li的区别
在制作使用ul li和不适用ul li的区别 1.使用ul li会使其中的内容和使用p标签一样,是一个块级元素,会使内容自动分行,使用后它的内容的内边距距离边框较远 2.不适用ul li标签,内容是行 ...
html中ul和li标签的用法介绍
普通的显示数据的时候,ul就是项目列表,li就是列表项,可以用来显示数据,如果用于DIV+CSS布局的话,ul+li可以替换表格的作用,具体的设置,如果宽度高度.行间距.背景边框需要配合CSS一起设置 ...
CSS-5 列表元素(ol+ul++li+dl+dt+dd)、表格元素、单元格合并、表单元素(input+label+radio+...)、Emmet语法、结构伪类(:nth-child）
目录 1_列表元素 1.1_列表的实现方式 1.2_有序列表 – ol – li 1.3_无序列表 – ul - li 1.4_定义列表 – dl – dt - dd 1.5_ 写前端代码逻辑顺序 2 ...

ul、li 标签实现完美表格

ul、li 标签实现完美表格相关推荐

最新文章

热门文章