Question

我试图让我的菜单使用左侧的图像。出于某种原因，每当我尝试将图像与菜单对齐时，它都无法正常工作。这就是html的样子，我无法让CSS工作。它要么将菜单扔到图像下面，要么背景消失，内容与菜单重叠，但图像位于正确的位置。图像的高度也是50像素，因此它不应该成为问题。

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，它就可以作为魅力＆gt;。＆gt;我一无所知，请帮忙

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

可能的原因是图像的宽度不允许内联块命令：

试试这个：

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

图像和菜单定位

2 个答案: