Question

我正在尝试将我的菜单图标显示在导航栏右上角的徽标旁边，但它没有在移动设备上显示。任何帮助表示赞赏，我真的不知道从哪里开始，我试图调整边距但没有运气。

CSS：

@media only screen and (max-width: 321px) {
    body {
        line-height: 1.25em;
        font-family: 'Questrial', sans-serif;
        color: #505050;
        margin: 0;
        padding: 0;
    }

    header {
        background: #505050;
        width: 100%;
        height: 80px;
        position: fixed;
        top: 0;
        left: 0;
        border-bottom: 1px solid #fff;
        z-index: 100;
        padding-bottom: 10px;
        margin-bottom: 5px;
    }

    #menu-icon {
        width: 15px;
        height: 15px;
        background: #fff url(img/menu-icon.png) center;
        position: relative;
    }

    #logo {
        margin-top: 10px;
        margin-left: 10px;
        float: left;
        width: 170px;
        height: 70px;
        display: block;
    }

    nav {
        float: right;
        padding-right: 300px;
        color: #fff;
        margin-top: 25px;
    }

    nav .active {
        font-size: 20px;
        color: #cc293f;
        font-weight: bold;
    }

    nav a {
        margin-right: 20px;
        font-size: 20px;
        color: #fff;
        text-decoration: none;
        font-weight: bold;
    }

    a:hover {
        color: #cc293f
    }

    a:hover#menu-icon {
        background-color: #fff;
        border-radius: 4px 4px 0 0;
    }

    ul {
        list-style: none
    }

    li {
        color: #fff;
        display: inline-block;
        float: left;
    }
}

HTML：

<header>
    <img id="logo" src="img/logo.png">
    <nav>
        <a href="#" id="menu-icon"></a>
        <ul>
            <li><a class="active" href="index.html">HOME</a></li>
            <li><a class="nav" href="upload.html">UPLOAD</a></li>
            <li><a class="nav" href="support.html">SUPPORT</a></li>
            <li><a class="nav" href="faqs.html">FAQS</a> </li>
        </ul>
    </nav>
</header>

Answer 1

a#menu-icon保留inline的显示属性。因此，您设置的宽度和高度属性不起作用。尝试添加display: inline-block。

Answer 2

我从网站的旧版本添加了以下代码，这里是代码：

#menu-icon {    display: inline-block }
nav ul, nav:active ul {
    display: none;
    position: absolute;
    padding: 10px;
    background: #505050;
    border: 5px solid #fff;
    right: 20px;
    top: 60px;
    width: 50%;
    border-radius: 4px 0 4px 4px;
}
nav li {
    font-color: #fff;
    text-align: center;
    width: 100%;
    padding: 10px 0;
    margin: 0;
}
nav:hover ul {
    background-color: #505050;
    display: block;
}
nav ul {    background: #505050 }

}

菜单图标未显示在手机上

2 个答案: