第一个 <a> 元素不会在响应式导航中显示在图像下方

Question

我制作了一个响应式导航，除了一件烦人的小事外，它工作得很好：当我将屏幕宽度调整为 1200 像素或以下时，菜单项应该会消失，并被一个显示所有消失的汉堡包图标所取代单击时垂直项目。虽然大多数 link 都按预期运行，但第一个 link（主页）将自己放在图像旁边而不是下一行。

我计划将手机的 1200px 更改为更接近 800px 的值，但将其设置为 1200 以便在使用 comp 时无需调整屏幕大小。

我尝试将图像制作在标签内，但它弄乱了填充，我不希望它可点击。

有没有简单的解决方法？使图像具有 display:block 似乎并没有解决它。

我的代码：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
    @import url('https://fonts.googleapis.com/css?family=Montserrat:500');
    body {
        margin: 0;
        background-color: #393f4d;
        background-image: linear-gradient(90deg, #323d46 0%, #393f4d 3% 97%, #323d46 100%);
        font-family: Montserrat, sans-serif;
    }

    .topnav {
        overflow: hidden;
        background-color: #1d1e22;
        background-image: linear-gradient(105deg, #131417 0%, #1d1e22 5% 95%, #131417 100%);
        padding: 15px 0px;
    }

    .topnav a {
        float: left;
        display: inline-block;
        color: #feda6a;
        transition: all 0.3s ease 0s;
        text-align: center;
        padding: 15px 16px;
        text-decoration: none;
        font-size: 17px;
    }

    .topnav a:hover {
        color: #c82850;
    }

    .topnav a.active {
        color: #c85870;
    }

    .logo {
        float: left;
        display: block;
        padding: 0px 16px;
    }

    .topnav .icon {
        display: none;
    }

    @media screen and (max-width: 1200px) {
        .topnav a:not(:first-child) {display: none;}
        .topnav a.icon {
            float: right;
            display: block;
        }

    }

    @media screen and (max-width: 1200px) {
        .topnav.responsive {position: relative;}
        .topnav.responsive .icon {
            position: absolute;
            right: 0px;
            top: 15px;
        }
        .topnav.responsive a {
            float: none;
            display: block;
            text-align: left;
        }
    }
</style>
</head>
<body>

    <div class="topnav" id="myTopnav">
        <img class="logo" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQLQXYINuBRI13H7QE7ChnfwxQ50PY76Vs_KA&usqp=CAU" alt="Penguin" style="width:48px; height:48px;">
        <a href="#home" class="active">Home</a>
        <a href="#news">News</a>
        <a href="#contact">Contact</a>
        <a href="#about">About</a>
        <a href="javascript:void(0);" class="icon" onclick="myFunction()">
            <i class="fa fa-bars"></i>
        </a>
    </div>

    <div style="padding-left:16px">
        <h2>Responsive Topnav Example</h2>
        <p>Resize the browser window to see how it works.</p>
    </div>

    <script>
    function myFunction() {
        var x = document.getElementById("myTopnav");
        if (x.className === "topnav") {
            x.className += " responsive";
        } else {
            x.className = "topnav";
        }
    }
    </script>

</body>
</html>

Answer 1

您在 .logo 图片上设置了 float: left，即使您的屏幕宽度低于 1200 像素。这就是 display: block 不起作用的原因。只需在媒体查询中设置 float: none：

@media screen and (max-width: 1200px) {
    .logo {
        float: none;
        display: block;
    }
}

第一个 <a> 元素不会在响应式导航中显示在图像下方

First <a> element won't display below img in responsive nav

html

css

nav

responsive-nav

display