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;
html ul标签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{
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>
原理
没啥原理，⼀看就懂。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。