Posso'não sei como colocá-los na mesma linha.
http://codepen.io/anon/pen/dovZdQ
<body>
<div class="navigation-bar">
<div id="navigation-container">
<img src="logo.png">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Get in Touch</a></li>
</ul>
</div>
</div>
</body>
O <ul>
é, por defeito, um elemento de bloco, em vez disso, faz com que seja inline-block
:
.navigation-bar ul {
padding: 0px;
margin: 0px;
text-align: center;
display:inline-block;
vertical-align:top;
}
Tem de aplicar a classe "logótipo" à imagem...e depois flutuar o "ul".
**HTML***
<img class="logo" src="http://i.imgur.com/hCrQkJi.png">
**CSS***
.navigation-bar ul {
padding: 0px;
margin: 0px;
text-align: center;
float: left;
background: white;
}
<img style="float:left" src="http://i.imgur.com/hCrQkJi.png">
2)Pode utilizar uma tabela HTML para colocar elementos numa só linha.
Código abaixo
<div class="navigation-bar">
<div id="navigation-container">
<table>
<tr>
<td><img src="http://i.imgur.com/hCrQkJi.png"></td>
<td><ul>
<li><a href="#">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Get in Touch</a></li>
</ul>
</td></tr></table>
</div>