html - 手机上不显示菜单图标

Question

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

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。