Align an anchor to the right

Consider the following:

<a>a</a><a>b</a> 

How can I align the second anchor (b) to the right?

PS: float is an abuse in this situation. It's not made for this and it causes some problems, so I need other more reasonable solution.

8 Answers

Just do this:

style="float:right" 

Like:

<div> <a href="#Equipment">Equipment</a> <a href="#Model">Model</a> </div> 

You'd need separate containers.

<p> <span> <a>Left</a> </span> <span> <a>Right</a> </span> </p> 

p {font-size:0; /* Fixes inline block spacing */ } span { width:50%; display:inline-block; } span.align-right { text-align:right; } span a { font-size:16px; } 

JSFiddle example.

Try this CSS,

Using CSS3 nth-child()

a:nth-child(2) { display: inline-block; text-align: right; width: 100%; } 

Demo:

Note: nth-child is a CSS3 and won't work on older browsers like IE6, 7 and 8

Support for old browsers

Set class to second <a> anchor element and apply the CSS.

<a>a</a><a>b</a> a.right { display: inline-block; text-align: right; width: 100%; } 

Maybe you can make something like this: <a>a</a><a>b</a>

And CSS like this:

a.right { position: absolute; right: 0; } 

Try and use :nth-child():

a:nth-child(2) { display: inline-block; text-align: right; width: 100%; } 

I don’t know if this works for the older browsers.

Assign a class or id to the 'b' containing anchor and give margin-left:100% to it.

For example:

.second{margin-left:100%;} 

or else

a:nth-child(2){margin-left:100%;} 

or else

you can also do like mentioned below:

css

a:nth-child(1){display:inline-block;width:50%;text-align:left;float:left;} a:nth-child(2), .second{display:inline-block;width:50%;text-align:right;} 

Working Fiddle

You may try the below code:

<a>a</a><a align="right">b</a> <a>a</a><a>b</a> 

<div> <a class ="mylink"> test </a> </div> 

.mydiv { text-align: left; } 

You must enter your styles for the 'a' tag algin give to 'div'.