How to align text in CSS?

HTML-CSS
1

Hello,

I’m making a website with HTML and CSS and I need to align the menu bar text to the right hand side. However, I have added text-align: right; but it’s not doing anything. Could someone please help me out with this? Thank you. Here is my code:

<!DOCTYPE html>
<html><html lang="en">
<head> 
<meta charset="UTF-8">
	<style>
		ul {
			list-style-type: none;
			margin: 0;
			padding: 0;
		}

		.menubar 
		{
			background-color: #333;
			overflow: hidden;
			

		}

		.menubar a
		{

			float: left;
			color: #ffffff;
			text-align: right;
			padding: 30px 30px;
			text-decoration: none;
			font-size: 20px;
			
		}
		

	</style>

<body>

	<div class="header">

		<h1 style="color:#ffffff;"><center>Crystal Pendants</center></h1>

		<body style="background-color:#6495ED">


</body>

<body>

<div class="menubar">
	
		


			<ul>

				<li><a href="default.asp">Home</a></li>
				<li><a href="products.asp">Products</a></li>
				<li><a href="contact.asp">Contact</a></li>
				<li><a href="about.asp">About</a></li>

			</ul>
		
	</div>

	

</body>


</head>
2

Welcome to the forum @krys98

Try float right.

Happy coding

3

Hello,

This did not work, all it did was mix up the order. For example: About Contact Products Home

5

You need to add position property with value absolute and right property with the value 0 to your Targeted selector menubar.
@krys98

6

Hi @krys98

The float: right property and styling will reverse the order of the list items.

Here’s another way. I removed the unordered list and list items from your code.

image
image1108×429 65.4 KB

Happy coding

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.