應用媒體查詢時，漢堡包菜單和導航鏈接未正確對齊

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

當我顯示輸出時，“免費試用”鏈接最終如圖所示在漢堡包圖標下方。 我如何才能將此菜單顯示為鏈接塊。 導航圖像

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之前添加句點