HTML+CSS实现的Hamburger menu列表元素行间距过大如何调整

问题原因 #

• 移动端汉堡菜单的ul继承了桌面端样式的height: 100%属性，父元素nav固定高度仅80px，导致菜单容器被限制在80px高度内，无法完整展示所有列表项
• 移动端的li没有覆盖桌面端的height: 100%属性，每个列表项被强制拉伸到80px高度，造成项间距过大

修复代码 #

只需替换原有CSS中max-width: 858px的媒体查询段即可：

@media (max-width: 858px) {
    .checkbtn {
        display: block;
    }
    nav ul {
        position: fixed;
        width: 100%;
        height: auto;
        background: #2c3e50;
        top: 80px;
        left: -100%;
        text-align: center;
        padding: 12px 0;
    }
    nav ul li {
        display: block;
        float: none;
        height: auto;
        padding: 7px 0;
    }
    nav ul li a {
        font-size: 20px;
        height: auto;
    }
    a:hover,
    a.active {
        background: none;
        color: #0082e6;
    }
    #check:checked~ul {
        left: 0;
    }
}

参数调整说明 #

• 若需要调整列表项的紧密程度，修改nav ul li的padding上下值即可，数值越小间距越小
• 若后续菜单列表项过多需要滚动，给nav ul加回overflow-y: scroll属性即可
• 菜单上下的边距可通过nav ul的padding上下值调整

内容的提问来源于stack exchange，提问作者Andrew Mizuno