第一种是没有缺口的，如下图
第二种是有缺口的，如下图
两种表格的最大特点就是不用给表格里的每个 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 标签实现完美表格》对你有帮助，请点赞、收藏，并留下你的观点哦！
