Question

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

但它会在图像右侧列出垂直。我怎样才能解决这个问题？我应该除了我的列表和img在不同的div中吗？

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作为下面导航的标题。

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

将图像与汉堡菜单对齐

1 个答案: