CODEWITHSUNDEEP
htmlcss
user2080105
user2080105

Reputation: 1702

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.

Upvotes: 5

Views: 122800

Answers (8)

Umer Qureshi
Umer Qureshi

Reputation: 1766

Just do this:

style="float:right"

Like:

<div>
   <a href="#Equipment" class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-mini">Equipment</a>
   <a href="#Model" class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-mini" style="float:right">Model</a>
</div>

http://jsfiddle.net/umerqureshi/0jx7kf1L/

Upvotes: 29

Saeid
Saeid

Reputation: 623

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

.mydiv {
    text-align: left;
}

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

Upvotes: 0

dmarinus
dmarinus

Reputation: 161

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.

Upvotes: 1

moritzwick
moritzwick

Reputation: 621

Maybe you can make something like this: <a>a</a><a class="right">b</a>

And CSS like this:

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

Upvotes: 3

James Donnelly
James Donnelly

Reputation: 128781

You'd need separate containers.

<p>
    <span>
        <a>Left</a>
    </span>
    <span class="align-right">
        <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.

Upvotes: 8

user2063626
user2063626

Reputation:

You may try the below code:

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

  <a>a</a><a style="text-align:right">b</a>

Upvotes: 0

Mr_Green
Mr_Green

Reputation: 41832

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

Upvotes: 0

Muthu Kumaran
Muthu Kumaran

Reputation: 17900

Try this CSS,

Using CSS3 nth-child()

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

Demo: http://jsbin.com/opexim/3/edit

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 class="right">b</a>


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

Upvotes: 9

Related Questions