html - 应用媒体查询时，汉堡包菜单和导航链接未正确对齐

Question

我使用以下代码为最大宽度为 500 像素的设备创建了一个汉堡包导航菜单:

   @media only screen and (max-width:500px){
    label{
        display: block;
        cursor: pointer;
    }

    menu{
        display: block;
        text-align: center;
        width: 100%;
    }

    .menu{
        display: none;
        border-bottom: 1px solid #eaeaeb;
        margin: 0;
    }

    #toggle:checked + .menu{
        display: block;
    }
        }

当我显示输出时，我的“免费试用”链接最终出现在汉堡包图标下方，如图所示。我如何让这个菜单显示为一个链接 block 。 Nav Image

Answer 1

我认为你遇到问题的原因是语法错误:

@media only screen and (max-width:500px){
        .label{ display: block; cursor: pointer; }
        .menu{ display: block; text-align: center; width: 100%; }
        .menu{ display: none; border-bottom: 1px solid #eaeaeb; margin: 0; }
        #toggle:checked + .menu{ display: block; }
    }

在label和menu之前添加句点