Align two texts next to each other

Coding Help
,
1

I am trying to align these two texts next to each other. How can I?

<u1>CommAndBlockagent</u1>
<u2>Home</u2>
2 
u1 {
  text-align: left;
}

u2 {
  text-align: right;
}

Source: https://www.w3schools.com/css/css_text_align.asp

4

It doesn’t work, they stay under each other

5

Hi MetalManiac,

I don’t think u1 and u2 are real HTML elements? But maybe it would work anyway! :blush:

I would do something like this:

<html>
<head>
	<style>
		.flex { display: flex; }
		.mr { margin-right: 1em; }
	</style>
</head>
<body>
	<div class="flex">
		<span class="mr">CommAndBlockAgent</span>
		<span class="mr">Home</span>
	</div>
</body>
</html>

This uses CSS flex box. Flex makes items go next to each other easily if they are in the same container (in our case, a div).

  1. Make a CSS class that is display: flex
  2. Make a CSS class to put a bit of right margin on your elements (I called it mr for short)
  3. Make a container div to put your elements in (could be any kind of element like nav) and give it the flex class
  4. Put your two elements inside it and apply the relevant CSS classes

I have used span and div, but if your items are nav links, you could use nav and li for list item or p if these are paragraph-like elements… we like to be semantic with HTML which means you use an element with the right meaning for the job :slight_smile:

Hope this helps :herb:

Ste

2 Likes
6

Is this for a nav bar or a list?

7

Huh the the solution was quite dumb. I was using because it was what I had used for a class, and of course it wasn’t an element.
The display: flex; really helped though, thanks!

1 Like
8

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