老师我在九宫格这块遇到一个问题，麻烦帮我看下
来源：7-1 九宫格
qq_做不到就别跟我谈永远_0
2020-03-12
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
在去除中间重叠部分的时候设置了负边距之后会影响这个盒子向左、、向上移动，通过 .grid li:nth-child(3n+1){margin-left:0 }设置了向左的，但是向上的要怎么设置呢让他恢复原状
4回答
-
viTaemin_nanali
2021-06-08
ul li:nth-child(-n+3){ margin-top: 0px; }00 -
快乐动起来呀
2020-03-13
我用chrome看九宫格的效果没问题呀，向上设置啥呢
032021-06-08 -
qq_做不到就别跟我谈永远_0
提问者
2020-03-12
以下是源代码
00 -
qq_做不到就别跟我谈永远_0
提问者
2020-03-12
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>九宫格-第一步</title>
<style>
body{padding:50px;margin:0;}
.grid{
display:flex;
flex-wrap:wrap;
width:300px;
list-style:none;
}
.grid li{
width:100px;
height:100px;
line-height:100px;
text-align:center;
border:4px solid gray;
box-sizing:border-box;
margin-left:-4px;
margin-top:-4px;
}
.grid li:hover{
border-color:red;
z-index:2;
}
.grid li:nth-child(3n+1){
margin-left:0;
}
/* .grid li:nth-child(n+1){
margin-top:0;
} */
</style>
</head>
<body>
<ul class="grid">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</body>
</html>
00
相似问题