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

Question

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

我计划将手机的 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

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

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

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-07-15 21:03:15

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-07-15 21:03:15

解决方案1
0 已采纳 2020-07-15 21:03:15