How to put a right aligned link in jQuery tabs?

Question

I have three jQuery tabs on the left. I wish to put a "Sign Out" link on the right within the tabs header. How I can achieve that?

Answer 1

I don't use jQuery tabs, but could you do something like this within the header?

<a href="" style="position:absolute; right:0">My link</a>

Answer 2

Sorry for the delay,

What you are looking for is this :

<li style="float: right"><a href="yourlogoutlink"><span>Log out</span></a></li>

Answer 3

I know that this is old and there is already an accepted answer but it came up near the top on a Google search that involves something similar and I have a much easier solution now that I figured I would share for others that find this question.

In your .cshtml or .aspx file, define the tabs like so:

<div id="tabs">
  <ul>
     <li><a href="#tab1">Tab 1</a></li>
     <li><a href="#tab2">Tab 2</a></li>
     <li><a href="#tab3">Tab 3</a></li>
     <a href="/Account/SignOut" style="float:right;">Sign Out</a>
  </ul>
  <div id="tab1">tab 1 content</div>
  <div id="tab2">tab 2 content</div>
  <div id="tab3">tab 3 content</div>
</div>

If you try to validate the raw html, you will get an error for including the a tag as a direct child of the ul but, once you call the jQueryUi tabs function on the parent div, it will all get sorted the way you want and look