水平對齊無序列表旁邊的圖像

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添加到您的無序列表中。