Question

我为最大宽度：500px的设备创建了一个汉堡导航菜单，代码如下：

   @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;
    }
        }

当我显示输出时我的免费试用版＆＃39;链接最终位于汉堡包图标下方，如图所示。如何将此菜单显示为链接块。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

之前的时段

应用媒体查询时，汉堡菜单和导航链接无法正确对齐

1 个答案: