<div id="menu">
<ul><li><a href="#" class="current">SocialSpot</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Latest</a></li>
<li><a href="#">Settings</a></li>
<li>Logout</li>
    </div>
    </ul>

I have this in a webpage. I have css aligning them. However I want the logout button to be aligned to the right but on the same bar. How can I do this without having them all aligned to the right?

    <div id="menu">
<ul><li><a href="#" class="current">SocialSpot</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Latest</a></li>
<li><a href="#">Settings</a></li>
<li>Logout</li>
    </div>
    </ul>

I have this in a webpage. I have css aligning them. However I want the logout button to be aligned to the right but on the same bar. How can I do this without having them all aligned to the right?

• javascript
• html
• css

• What do you mean 'aligning them'? Are you displaying them all horizontally? – Eric Di Bari Commented Mar 4, 2011 at 19:55
• you can add a class to that li and create a css rule for the class. – Brandon Frohbieter Commented Mar 4, 2011 at 19:56
• I am using them horizontally yes. – Michael Commented Mar 4, 2011 at 19:56
• Creating a jsFiddle example will drastically increase your chances of getting a good answer. – thirtydot Commented Mar 4, 2011 at 19:58

3 Answers 3

CSS:

ul { overflow:auto; }
li { float:left; }
li:last-child { float:right; }

Live demo: http://jsfiddle.net/simevidas/Rs4Sa/

Btw the :last-child pseudo-class does not work in IE8 (and below). If you want it to work in those browsers, you will have to assign a class (e.g. right) to the Logout LI item, and then:

li.right { float:right; }

Live demo: http://jsfiddle.net/simevidas/Rs4Sa/1/

You might want float: right on the css for the logout link.

Like this? http://jsfiddle.net/QAjkP/

You can use an id tag to specify the css properties for that one <li> item