html - 将左 Logo 添加到我的导航栏

Question

我试图在我的标题导航栏上设置我的公司 Logo ，但没有成功。我尝试在导航本身之前添加，但它没有使内容居中。先显示图像，然后显示杂乱的菜单。

<header>
  <img src="http://i.imgur.com/jNwTPBi.png">
    <nav id="nav" class="ry">
      <ul id="main-menu">
        <li>
          <a href="#"></i>Home</a>
      </li>
        <li>
          <a href="#"></i>About</a>
        </li>
        <li>
          <a href="#"></i>Our work </a>
        </li>
        <li>
          <a href="#"></i>Work</a>
        </li>
        <li>
          <a href="#"></i>Contact</a>
        </li>
      </ul>
    </nav>  
    </header>

您可以在这里尝试，添加 <img src="http://i.imgur.com/jNwTPBi.png"> : http://codepen.io/anon/pen/XKKPGO

如何将 Logo 放在左侧，以便获得类似以下解决方案的内容？我想我必须对 .css 进行一些更改，但我不知道我必须编辑什么。

提前致谢。

Answer 1

您的 CSS 太强大了。您需要做的就是为包装器指定/创建相对位置，为 Logo 指定绝对位置。

<header>
  <div class="wrapper"> ..
    <img src="http://i.imgur.com/jNwTPBi.png" class="logo"> ..

header .wrapper {
width: 1100px;
margin: 0 auto;
position: relative;
}

header .wrapper .logo {
position: absolute;
left: 0;
}