请稍等 ...
×

采纳答案成功！

向帮助你的同学说点啥吧！感谢那些助人为乐的人

老师我在九宫格这块遇到一个问题，麻烦帮我看下

九宫格-第一步
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

在去除中间重叠部分的时候设置了负边距之后会影响这个盒子向左、、向上移动，通过 .grid li:nth-child(3n+1){margin-left:0 }设置了向左的，但是向上的要怎么设置呢让他恢复原状
qq_做不到就别跟我谈永远_0 2020-03-12 15:14:38
源自：7-1  九宫格
676
收起

正在回答 回答被采纳积分+3

4回答

viTaemin_nanali 2021-06-08 11:39:54 
ul li:nth-child(-n+3){      margin-top: 0px;    }


0 回复 有任何疑惑可以回复我~
收起回答
取消 回复
快乐动起来呀 2020-03-13 22:16:22

我用chrome看九宫格的效果没问题呀，向上设置啥呢

0 回复 有任何疑惑可以回复我~
收起回答
取消 回复
提问者 qq_做不到就别跟我谈永远_0 2020-03-12 15:23:26

以下是源代码

0 回复 有任何疑惑可以回复我~
收起回答
取消 回复
提问者 qq_做不到就别跟我谈永远_0 2020-03-12 15:21:20

<!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>


0 回复 有任何疑惑可以回复我~
收起回答
取消 回复

相似问题

关于迷宫生成问题的思考和疑问
641 0 4
老师，关于我对9宫格布局的思考与困惑
610 0 2
老师，我遇到了几个问题，帮我看一下，谢谢
699 0 5
classic/favor?appkey=×××请求数据为喜欢的期刊，如果数据为空，那么这样去显示我喜欢的期刊这一板块呢？
636 0 7
老师，我的appium现在运行不了，我把你的代码下载下来对比也没发现问题，弄了好久没弄好，可以给我远程看一下吗？
701 0 9

登录后可查看更多问答，登录/注册

问题已解决，确定采纳
还有疑问，暂不采纳
前端跳槽面试必备技巧 面试官全流程指导
  • 参与学习       4836    人
  • 解答问题       830    个

一门让你能成功获取前端 Offer 的课程， 不只是技术，面试“技巧”也至关重要

了解课程

本课精华内容

问答

s5. constructor()

779 10

#margin > p 是不错错了，正确是不是 #margin p？

928 10

为什么new Foo().getName()是先执行new Foo()而不是先执行Foo().getName()

1.3k 9

z-index不是只能在定位元素上使用吗？

1.6k 8

我做了一个小 demo，请老师点评一下我的代码质量

934 7

查看更多本课问答
意见反馈 帮助中心 APP下载
官方微信