Question

我正在尝试为我的屏幕低于1025px时创建一个汉堡包菜单但由于某种原因，每当我使窗口使用媒体查询时，我的导航和菜单div之间存在小的差距。我不知道为什么会这样。当我使用开发人员工具时，我发现其中任何一个都没有边距。

    nav #menu{
        position: relative;
        z-index: 999;
        float: right;
        margin: 0 75px 0 0;
        line-height: 50px;
    }
    nav #menu li{
        font-family:"Abril Fatface";
        display: inline-block;
        padding-left: 50px;
    }
    nav #menu li a{
        color: white;
        position: relative;
        text-decoration: none;
    }

    nav #menu li a:after{
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 0%;
        border-bottom: 2px solid #c1c1c1;
        transition: .3s;
    }
    nav #menu li a:hover:after{
        width: 100%;    
    }
    nav #menu li a:hover{
        color: #c1c1c1;
    }

    @media (max-width: 1024px){
        .hamburger{
            float: right;
            cursor: pointer;
            padding: 15px;
            display: block;
            border-left: .1px solid white;
        }
        .line{
            border-bottom: 4px solid white;
            width: 35px;
            margin-bottom: 5px;
        }
        .line:last-child {
            margin-bottom: 0;
        }
        nav #menu{
            width: 100%;
            overflow: hidden;
            padding-right: 0px;
            margin: 0;
            line-height: 25px;
    /*      height: 0;*/
        }
        nav #menu li{
            display: block;
            width: 100%;
            background-color: black;
        }
        nav #menu li a{
            width: 100%;
        }
        .open{
            height: auto;
        }

Answer 1

也许尝试指定：

nav {
      margin: 0 auto;
}

表和div之间的空间

1 个答案: