Получение логотипа и логотипа внутри заголовка

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/ там находится груз правильно, но когда я открываю страницу в хроме он загружает неправильно, поэтому я очень смущен.

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>