试图让我的导航在我的徽标旁边

时间:2017-04-01 21:25:59

标签: html css

我正在尝试将导航器放在我的徽标旁边,它只是将它放在它下面。我的代码不是很好,但是我希望导航设置在徽标的旁边,就像我在设计中一样:

enter image description here

HTML:

<body>
<div class="backgroundofdivgreen">
<header>


<div class="logo"><a href="index.html"><img src="images/logo.jpg"></a></div>    

    <nav>
    <a href="index.html">Home</a>
    <a href="services.html">Services</a>
    <a href="offers.html">Offers</a>
    <a href="people.html">People</a>
    <a href="franchises.html">Franchises</a>
    <a href="reviews.html">Reviews</a>
    </div>

</header>
</div>

CSS:

body {
    margin: 0px;
    background-color:blue;
}

.backgroundofdivgreen {
    height: 96px;
    margin: 0px;
    background-color: #39b54a;

}

header {
    width: 980px;
    height: 96px;
    background-color: #39b54a;
    margin: 0px auto;
}

nav {
    float:right;
}

1 个答案:

答案 0 :(得分:0)

float: left;应用于.logo课程,然后使用<nav>`关闭</nav> . not with

&#13;
&#13;
body {
  margin: 0px;
  background-color: blue;
}

.backgroundofdivgreen {
  height: 96px;
  margin: 0px;
  background-color: #39b54a;
}

header {
  width: 980px;
  height: 96px;
  background-color: #39b54a;
  margin: 0px auto;
}

.logo {
  float: left;
}

nav {
  float: right;
}
&#13;
<body>
  <div class="backgroundofdivgreen">
    <header>


      <div class="logo">
        <a href="index.html"><img src="images/logo.jpg"></a>
      </div>

      <nav>
        <a href="index.html">Home</a>
        <a href="services.html">Services</a>
        <a href="offers.html">Offers</a>
        <a href="people.html">People</a>
        <a href="franchises.html">Franchises</a>
        <a href="reviews.html">Reviews</a>
      </nav>

    </header>
  </div>
&#13;
&#13;
&#13;