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

Question

I made a responsive nav that works perfectly except for one annoying little thing: When I resize the screen width to 1200px or below, the menu items are supposed to disappear and get replaced with a hamburger icon that displays all those disappeared items vertically when clicked.我做了一个响应式导航，除了一件烦人的小事外，它工作得很好：当我将屏幕宽度调整为 1200 像素或以下时，菜单项应该消失并被一个汉堡包图标代替，该图标在单击时垂直显示所有这些消失的项目。 While most of the links do as expected, the first link (Home) plops itself next to the image instead of the next line.虽然大多数链接都按预期进行，但第一个链接（主页）将自己放在图像旁边而不是下一行。

I plan on changing the 1200px to something more like 800px for phones, but made it 1200 to work on it without having to resize the screen so much while on comp.我计划将手机的 1200px 更改为更像 800px 的东西，但将其设置为 1200 即可在此工作，而无需在 comp 时调整屏幕大小。

I tried making the image inside an tag, but it messed with the padding and I don't want it to be clickable.我尝试在标签内制作图像，但它与填充混淆，我不希望它是可点击的。

Is there a simple fix for this?有一个简单的解决方法吗？ Making the image have display:block didn't seem to fix it.使图像具有display:block似乎没有修复它。

My code:我的代码：

<!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

You have float: left set on your .logo image, even when your screen width is below 1200px.即使您的屏幕宽度低于 1200 像素，您的.logo图像上也设置了float: left 。 This is why display: block was not working.这就是display: block不工作的原因。 Simply set float: none in a media query:只需在媒体查询中设置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