重新调整大小后,导航栏的高度会增加,并重新调整为桌面大小

时间:2014-05-15 09:49:00

标签: css html5 nav

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

.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

还附上截图供您参考 Original height of navbar

After resizing, click on dropdown and back to desktop size

1 个答案:

答案 0 :(得分: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粘贴到您的文件即可,