水平对齐无序列表旁边的图像

Question

因此，我试图将图像放在无序列表旁边（图像充当导航的主页按钮），但实际列表不断向下移动，当我希望它成为下一个到家庭的形象。有想法该怎么解决这个吗？

这是发生了什么：Image not aligned with the list

​​

---

#navigation { 
    height: 50px; 
    width: 100%; 
    background-color: #2F4E6F; 
} 

#navigation li a { 
    text-decoration: none; 
    font-family: 'Open Sans'; 
    font-size: 25px; 
    color: #FFFFFF; 
} 

#navigation li a:hover { 
    color: #7c7f84; 
    border-bottom: solid black 2px; 
} 

#navigation li { 
    list-style-type: none; 
    display: inline-block; 
    padding: 0 10px; 
    background-color: red; 
} 

#home_button { 
    width: 45px; 
    height: 45px; 
    display: inline-block; 
    margin-left: 10px; 
    margin-top: 2px; 
} 

Answer 1

您可以将display: flex添加到父级，它会将它们放入弹性行中。

#navigation { 
 
    height: 50px; 
 
    width: 100%; 
 
    background-color: #2F4E6F; 
 
    display: flex; 
 
} 
 

 
#navigation li a { 
 
    text-decoration: none; 
 
    font-family: 'Open Sans'; 
 
    font-size: 25px; 
 
    color: #FFFFFF; 
 
} 
 

 
#navigation li a:hover { 
 
    color: #7c7f84; 
 
    border-bottom: solid black 2px; 
 
} 
 

 
#navigation li { 
 
    list-style-type: none; 
 
    display: inline-block; 
 
    padding: 0 10px; 
 
    background-color: red; 
 
} 
 

 
#home_button { 
 
    width: 45px; 
 
    height: 45px; 
 
    display: inline-block; 
 
    margin-left: 10px; 
 
    margin-top: 2px; 
 
}

<div id="navigation"> 
 
    <a href="#"><img src="images/home_button.png" alt="Image representing a home icon" id="home_button"></a> 
 
    <ul> 
 
    <li><a href="#">Phantom of the Opera</a></li> 
 
    <li><a href="#">The Lion King</a></li> 
 
    <li><a href="#">Wicked</a></li> 
 
    <li><a href="#">Bookings</a></li> 
 
    <li><a href='#'>Location</a></li> 
 
    </ul> 
 
</div>

Answer 2

尝试使用在你的CSS的float财产。这将允许元素与对方一起显示。

将行float:left;添加到#home-button的CSS中，并将float:right添加到您的无序列表中。