試圖讓我的導航旁邊我的徽標

我想讓我的導航旁邊我的標誌，它只是不停地把它放在下面。我的代碼是不是很大，但我想要的資產淨值是旁邊的標誌就像我在設計中，我有：試圖讓我的導航旁邊我的徽標

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

來源

2017-04-01 Diddydan

其實，不推薦使用浮動positionning，因爲它是不適合的，但對文本中的圖像或lettrines。您應該考慮使用「位置」屬性或網格/柔性版式佈局（如果可能，請注意兼容性）。另外，'display：inline-block'可以幫助你在這裏:) – Magix

應用float: left;到.logo類和關閉<nav>與</nav> . not with`：

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

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

來源

2017-04-01 21:29:44 Johannes

試圖讓我的導航旁邊我的徽標

回答

相關問題