이미지를 햄버거 메뉴에 맞 춥니 다

Question

이미지와 햄버거 메뉴를 머리글 내에 정렬하려고합니다. 그리고 클릭하면 이미지의 하단에 목록이 수평선으로 나타납니다.

대신 이미지 오른쪽에 세로로 나열됩니다. 이 문제를 어떻게 해결할 수 있습니까? 나는 다른 목록에서 내 목록과 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; 
    } 
} 

자바 스크립트 내가하고 결국 내가 처음 리튬로 이미지를 추가했다 무엇

/* 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><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;} 
} 

이렇게하면 이미지가 모바일의 hambuger 메뉴와 같은 행에 표시됩니다. 하지만 바탕 화면보기로 이동하면 아래 nav와 함께 머리글로 img가 표시됩니다.

이제 모바일보기에서 사용자가 숨겨진 메뉴를보기 위해 클릭하면 내비게이션이 수평이됩니다.