Question

我试图在标题导航栏上设置公司徽标，但没有运气。我尝试在导航本身之前添加，但它不是内容的中心。首先显示图像，然后显示杂乱的菜单。

<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

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

提前致谢。

Answer 1

你的CSS已经过时了。您需要做的就是给包装器创建一个相对位置，将徽标创建为绝对位置。

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

Answer 2

我觉得这很容易，所以我认为它可以回答你的问题

<header>
<div class="with_class">
  <img src="">
</div>

<nav></nav>
</header>

在图像上放置一个包装div并放置一个绝对位置。宽度，无论你想要的div宽度和高度与ur标头相同。你以前试过吗？

在导航栏中添加左侧徽标

2 个答案: