css - 调整为移动尺寸并再次重置为桌面尺寸后，导航栏的高度增加

Question

大家好，我有一个非常奇怪的问题。如果您在调整为移动尺寸时可以看到我的导航栏，然后单击下拉菜单并再次使其成为正常的桌面尺寸，则导航栏高度会增加。我想要一个水平对齐的菜单，我用过

.menu_container>ul:after{
content: "";
padding-left: 100%;
visibility: hidden;
/* do not use float:left but the display:inline-block below!!! */
display: inline-block;
}

如果我删除了内容:“”，它工作正常但菜单的对齐方式消失了

This is my fiddle

另附上截图供大家引用

Answer 1

DEMO

这是因为 height: auto;出现在

#hidden_menu_collapser:checked + ul {
height: auto;
min-height: 40px;
max-height: 2999px;
background-color: 
#FFF;
}

您需要更新 height:auto;至 height: 44px !important;并在桌面媒体查询中更新它，以便删除多余的空间。

    @media only screen and (min-width: 768px) {
     #hidden_menu_collapser:checked + ul {
       min-height: 40px;
       max-height: 2999px;
       background-color: #FFF;
       height: 44px !important;
    }
   }

您只需将上面的 css 复制粘贴到您的文件中就可以了