獲取標題和導航標題內的排隊

Question

我是完全新的HTML和CSS，我試圖讓我的網站的標誌和導航顯示在彼此旁邊，而不是在下面。 我只是無法弄清楚發生了什麼問題。

我列出了我的html，然後是我的css。我的CSS是它自己的文件，我只是無法弄清楚如何在這裏分離它們。

<!--Header--> 
     <header>  
      <a href="#"> 
       <img src="images/logo.png" alt="Lost Collector" title="Lost Collector"/> 
      </a> 
      <!--Primary navigation--> 
      <nav> 
       <ul> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">About Us</a></li> 
        <li><a href="#">Contact</a></li> 
       </ul> 
      </nav> 
     </header> 


header a img { 
    margin-top: 10px; 
    margin-bottom: 10px; 
    margin-left: 0px; 
    margin-right: 10px; 
    display: inline;} 

nav { 
display: inline; 
float: right;} 

nav ul { 
list-style: none; 
display: inline;} 

nav ul li { 
display: inline-block; 
text-decoration: none; 
font-size: 90%; 
font-weight: bold; 
color: #069; 
padding: 4px 3px;} 

nav li a { 
display: inline-block; 
padding: 4px 3px; 
text-decoration: none; 
font-size: 90%; 
font-weight: bold; 
color: #069;} 

這裏是我的網頁是什麼樣子的截圖，你可以看到導航低於標誌我試圖讓它顯示在右邊的同一行的標誌。 http://postimg.org/image/rjqjmrog1/

我的工作問題出來了使用的jsfiddle， https://jsfiddle.net/2fwvzb7s/1/ 在有負載正常，但是當我在Chrome中打開我的網頁加載錯誤的，所以我很迷茫。

Answer 1

其運作良好，請您詳細說明問題。

header a{float:left; display:inline-block} 
 
header a img { 
 
    margin-top: 10px; 
 
    margin-bottom: 10px; 
 
    margin-left: 0px; 
 
    margin-right: 10px; 
 
    display: inline; 
 
    height:45px; 
 
} 
 
nav { 
 
    display: inline; 
 
    float: right; 
 
} 
 
nav ul { 
 
    list-style: none; 
 
    display: inline; 
 
} 
 
nav ul li { 
 
    display: inline-block; 
 
    text-decoration: none; 
 
    font-size: 90%; 
 
    font-weight: bold; 
 
    color: #069; 
 
    padding: 4px 3px; 
 
} 
 
nav li a { 
 
    display: inline-block; 
 
    padding: 4px 3px; 
 
    text-decoration: none; 
 
    font-size: 90%; 
 
    font-weight: bold; 
 
    color: #069; 
 
}

<!--Header--> 
 
<header> 
 
    <a href="#"> 
 
    <img src="https://step.wiwi.uni-kl.de/fileadmin/wd2013/fb-logo/fb_logo_dummy.png" alt="Lost Collector" title="Lost Collector" /> 
 
    </a> 
 
    <!--Primary navigation--> 
 
    <nav> 
 
    <ul> 
 
     <li><a href="#">Home</a> 
 
     </li> 
 
     <li><a href="#">About Us</a> 
 
     </li> 
 
     <li><a href="#">Contact</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</header>