Question

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

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

Answer 1

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

＆＃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;

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

1 个答案: