Div nawigacji nie chce się ułożyć w jednej linii z drugim divem

Question

Cześć,
kompletnie nie mam pojęcia dlaczego div nawigacji nie chce "przepuścić" do linii w której się znajduje drugiego diva pomimo, że wszystko jest niby dobrze. Gdy usuwam marginesy, w divie z nawigacją i dodaję "float:left" to niby wszystko działa, ale gdy znów próbuję wyśrodkować to 2 div przeskakuje do dolnej linijki :/.
Proszę o pomoc i pozdrawiam!

<div class="topbar">
		<div class="menu">
				<ol class="topmenu">
					<li> <a href="#">Strona Główna</a></li>
					<li> <a href="#">Wsparcie</a></li>
					<li> <a href="#">Kontakt</a></li>
					<li> <a href="#">Współpraca</a></li>
				</ol>
		</div>
		<div id="color-adjust">
			<i class="icon-color-adjust"></i>
		</div>

.menu
{ 
	width: 50%;
	padding: 10px 0;
	background-color:rgb(66, 80, 156);
	border-bottom: 1px solid rgb(38, 46, 90);
	border-left: 1px solid rgb(38, 46, 90);
	border-right: 1px solid rgb(38, 46, 90);
	border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px;
	text-align: center;
	margin-left:auto;
	margin-right: auto;
}
.menu ol
{
	padding: 0px;
	margin: 0;
	list-style-type: none;
	font-size: 15px;
	height: 20px;
	display: inline-block;
}
.menu ol a
{
	color: #ffffff;
	text-decoration: none;
	display: block;
	padding:0px 20px;
}
.menu ol > li
{
	float: left;
}
#color-adjust
{
	float:right;
	font-size:20px;
	height: 30px;
	width: 30px;
	color:white;
	background-color:rgb(66, 80, 156);
	border-radius:7px;
	margin-right: 20px;
}

 

Answer 1

W jaki sposób pozycjonujesz bloki w bloku o klasie " topbar "? Dla tego bloku daj display:flex i powinno być dobrze. Poczytaj o Flexible box (flebox).

Comments

dzięki wielkie :D

Answer 2

Jeśli już używasz float to oba elementy powinny mieć go ustawionego na wartość left.

Ale zapomnij o układaniu layoutów za pomocą float i użyj tutaj flexboxa.