将图像与汉堡菜单对齐

Question

我正在尝试在标题中对齐图像和汉堡菜单。单击时，列表以水平线显示在图像底部。

但相反，它在图像右侧垂直列出。我该如何解决这个问题？我应该在不同的div中但我的列表和img吗？

.html

<header>
<img src="images/ace_in_the_hole.png" alt="Ace in the Hole Weekend Marathon Logo">
<ul class="topnav" id="myTopnav">
    <li><a href="#about">About</a></li>
    <li><a href="#courseinfo">Course Information</a></li>
    <li><a href="#register">Registration</a></li>
    <li><a href="#contact">Contact</a></li>
    <li class="icon">
<a href="javascript:void(0);" onclick="myFunction()">&#9776;</a>
</li>
</ul>
</header>

.css

img {
    width: 50%;
    height: 50%;
    float: none;
}
header {
    padding-bottom: 2em;
}
/* Remove margins and padding from the list*/
ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: white;
}
/* Float the list items side by side */
ul.topnav li {float: left;}
/* Style the links inside the list items */
ul.topnav li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}
/* Change background color of links on hover */
ul.topnav li a:hover {background-color: lightgray;}
/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}
/* When the screen is less than 680 pixels wide, hide all list items. Show the list item that contains the link to open and close the topnav (li.icon) */
@media screen and (max-width:680px) {
    img{
        float: left;
        height: 5em;
    }
    ul.topnav li {display: none;} 
    ul.topnav li.icon {
        float: right;
        display: inline-block;
    }
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens  */
@media screen and (max-width:680px) {
    ul.topnav.responsive {position: relative;}
    ul.topnav.responsive li.icon {
        position: absolute;
        top: 0;
        right: 0;  
    }
    ul.topnav.responsive li:not(:last-child) {
        margin-top: 6em;
        display: inline-block;
    }
    ul.topnav.responsive li a {
        display: inline-block;
    }
}

JavaScript

 /* Toggle between adding and removing the "responsive" class to topnav when  the user clicks on the icon */
function myFunction() {
 var x = document.getElementById("myTopnav");
 if (x.className === "topnav") {
    x.className += " responsive";
 } else {
    x.className = "topnav";
 }
 }

Answer 1

我最终做的是将图像添加为第一个 li。

 <li><img src="images/ace_in_the_hole.png" alt="Ace in the Hole Weekend Marathon Logo"></li>
 <li><a href="#about">About</a></li>
 <li><a href="#courseinfo">Course Information</a></li>
 <li><a href="#register">Registration</a></li>
 <li><a href="#contact">Contact</a></li>
 <li class="icon">

然后在CSS中，我添加了第一个孩子。

@media screen and (max-width:680px) {
ul.topnav li:not(:first-child) {display: none;}
}

这样，图像将与移动设备中的汉堡菜单显示在同一行上。但是当您转到桌面视图时，您将看到 img 作为标题，下面带有导航。

现在我的问题是当用户单击以查看隐藏菜单时，使导航在移动视图中水平。