图像和菜单定位

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