Problem z wyrównaniem divów w jednej linii!

Question

Otóż chodzi o to ze divy nie chcą się wyrównać!

Nie da się tak wyjaśnić więc pokaże!

 

Jest tak:

A chciał bym tak:

 

Podam też kody

 

HTML/PHP:

<div class="nav">
			 <div id="Witajuser">
			 <?php 
		 echo "<h1>Witaj ".$_SESSION['user'].'!<h1>'; 
		 ?>
		 </div>
		 <div id="jakiemail">
		 <?php 
		 echo "<h3>E-mail: ".$_SESSION['email']; 
		 ?>
		 </div>
		 <h3 id="wylogujesz"><a  href="logout.php">Wyloguj Się</a><h3> <div id="zegar"></div>
		</div>

CSS:

.nav
{
	color: Yellow;
	background-color: 	#1E90FF !important;
	margin: 0px;
	border: 0px;
	padding: 0px;
	text-align: center;
	width: 100%;
	font-family: AR CENA;
	display:table;
    margin-right: auto;
	margin-left: auto;
	
}
#zegar
{
	float:left;
	display:table;
    margin-right: auto;
	margin-left: auto;
	background-color: blue;
	display: inline-block;
}
#wylogujesz
{
	float:left;
	display:table;
    margin-right: auto;
	margin-left: auto;
	background-color: blue;
	display: inline-block;
}
#Witajuser
{
	float:left;
	display:table;
    margin-right: auto;
	margin-left: auto;
	background-color: blue;
	display: inline-block;
}
#jakiemail
{
	float:left;
	display:table;
    margin-right: auto;
	margin-left: auto;
	background-color: blue;
	display: inline-block;
}

 

No i jak to uzyskać? (obrazek nr.2)

Answer 1

Flexbox:https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

Przez twój kod dostaje oczopląsu xd

Używając flexbox'u nie używaj opływania(float).

Display table/inline-block, margin-right/left usun - wszystko flexboxem;

    display:table;
    margin-right: auto;
    margin-left: auto;
    background-color: blue;
    display: inline-block;

Zgodnie z kaskadowością "display:inline-block" będzię 'używane'.