圖像和菜單定位

Question

我想讓我的菜單與左側的圖像一起工作。出於某種原因，每當我嘗試將圖像與菜單排列在同一行時，它都不能正常工作。這就是html的樣子，我無法得到CSS的工作。它要麼將菜單扔到圖像下面，要麼背景消失，內容與菜單重疊，但圖像位於正確的位置。圖像的高度也是50px，所以它不應該是一個問題。

HTML：

<div> 
    <img src="logo_small2.png" alt="" id="banner"> 
    <nav> 
     <ul> 
      <li class="selected"><a href="index.html">Main page</a></li> 
      <li><a href="classes.html">Classes</a></li> 
      <li><a href="gamemodes.html">Game modes</a></li> 
      <li><a href="contact.html">Contact</a></li> 
     </ul> 
    </nav> 
</div> 

CSS：

header div { 
    height: 50px; 
    background: #333333; 
} 

#banner, 
header ul li { 
    display: inline-block; 
} 

header nav > ul > li{ 
    box-sizing: border-box; 
    height: 50px; 
    padding: 12px; 
    position: relative; 
} 

現在會發生什麼情況是，旗幟就位在div的背景和菜單是旗幟，在一個背景下新隊。如果我用一個簡單的H1它可以作爲一個魅力>更換IMG>我一無所知，請大家幫忙

Answer 1

您的CSS與HTMl不匹配，沒有顯示header。

假設div是，實際上頭，導航需要內聯塊我也懷疑。它目前是塊級，因此100％寬。

然後您可以對齊元素。

header { 
 
    height: 50px; 
 
    background: tomato; /* for demo only */ 
 

 
} 
 
header nav { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
header nav ul { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#banner, 
 
header ul li { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
header nav > ul > li { 
 
    box-sizing: border-box; 
 
    height: 50px; 
 
    padding: 12px; 
 
    position: relative; 
 
}

<header> 
 
    <img src="http://www.fillmurray.com/200/50" alt="" id="banner"> 
 
    <nav> 
 
    <ul> 
 
     <li class="selected"><a href="index.html">Main page</a> 
 
     </li> 
 
     <li><a href="classes.html">Classes</a> 
 
     </li> 
 
     <li><a href="gamemodes.html">Game modes</a> 
 
     </li> 
 
     <li><a href="contact.html">Contact</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</header>

Answer 2

可能的原因是圖像的寬度不允許inline-block的COMAND：

試試這個：

img{ float:left; width:50%; vertical-align:middle;} 
ul{float:right;width:40%;vertical-align:middle;}