Alexander  Tolkachev Alexander Tolkachev - 5 months ago 21
HTML Question

Html css nav styling

I am styling my own nav and i need to place About and Actions aligned to the left. But telephone, username, and cash was aligned to the right. How can i achieve this?



.header {
margin: 0;
text-align: left;
color: white;
}
.my-header{
background-color: #003399;
}
.header li, form { display: inline; }

.header-normal li a{
text-decoration: none;
padding-right: 10px;
padding-left: 5px;
color: white;
font-size: 14pt;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
.normal li a:hover{
color: #ff6699;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="menu_laba3.css">
</head>
<body>
<div class="my-header">
<ul class="header-normal header">
<li><a href="#">About</a></li>
<li><a href="#">Actions</a></li>
<li> Telephone: +375293326369 </li>
<li><a href="#"> username </a> </li>
<li> 500$ </li>

</ul>
</div>
</body>
</html>




Answer

(slightly edited)

Add this to your CSS:

.header-normal {
  display: flex;
  align-items: baseline;
  }
ul.header-normal li:nth-child(3) {
  margin-left: auto;
  }

It treats the menu ul as a flex container, aligning the items vertically to the baseline. margin-left: auto on the third list item will cause everything from there on to be aligned to the right.

.header {
	margin: 0;
	text-align: left;
	color: white;
}
.header-normal {
  display: flex;
  align-items: baseline;
  }
ul.header-normal li:nth-child(3) {
  margin-left: auto;
  }
  
.my-header{
	background-color: #003399;
}
.header li, form { display: inline;  }

.header-normal li a{
	text-decoration: none;
	padding-right: 10px;
	padding-left: 5px;
	color: white;
	font-size: 14pt;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
.normal li a:hover{
	color: #ff6699;
}
<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="menu_laba3.css">
</head>
<body>
	<div class="my-header">
		<ul class="header-normal header">
			<li><a href="#">About</a></li>
			<li><a href="#">Actions</a></li>
			<li> Telephone: +375293326369 </li>
			<li><a href="#"> username </a> </li>
			<li> 500$ </li>
			
		</ul>
	</div>
</body>
</html>

Comments