List navigation - aligning to left and right

Question

This is an example markup:

<ul id="subnav" class="right">
    <li><a href="#">Email</a></li>
    <li><a href="#">Note</a></li>
    <li><a href="#">Test</a></li>
</ul>

How can I get the "Test" to align to the right of the subnav and the rest of the items to the left? Do I need to have another UL and align that to the right and put test in it, or do I just align the test li to the right?

This is a demo: http://jsfiddle.net/RbHN5/2/

If anyone could tell me the correct implementation I would appreciate it

Answer 1

You can use float: right to align the last-child alone to right.

#subnav li:last-child{
    float: right;
    margin-right: 40px; /* Optional setting dependent on other styles */
}

Demo

Note: This works only if the element in question is the last-child . If there are multiple elements then the same float setting can be used but with a class as selector (like .right ) instead of last-child .

Updated Demo - With multiple right aligned elements using the right class.

Answer 2

YOu can do like this

.test
 {
float:right;
margin-right:40px !important;

 }

<li  class="test"><a href="#">Test</a></li>

http://jsfiddle.net/RbHN5/13/

Answer 3

Either you can do this

HTML:

<ul id="subnav" class="right">
    <li><a href="#">Email</a></li>
    <li><a href="#">Note</a></li>
    <li><a href="#">Test</a></li>
</ul>

CSS:

*{margin:0;padding:0;border:none;list-style:none;}
.test{float:right;margin: 20px;}
#subnav {margin: 20px; font-family: Arial;font-size: 13px;}
#subnav li{float:left;border-radius: 4px;line-height: 40px; height: 40px; background-color: white; margin-right: 10px; padding-left: 10px; padding-right: 10px;}
#subnav li:last-child{float:right;}
body {background: pink;}

.

OR

This

<div class="wrap">
    <ul id="subnav" class="right">
        <li><a href="#">Email</a></li>
        <li><a href="#">Note</a></li>    
    </ul>
    <div class="test">
        <a href="#">Test</a>
    </div>
</div>

CSS:

*{padding:0;margin:0;list-style:none;}
.wrap{position:relative;}
#subnav {margin: 20px; font-family: Arial;
font-size: 13px; width: 100%}
#subnav li{display:inline-block;}
#subnav li, .test{border-radius: 4px;line-height: 40px; height: 40px; background-color: white; margin-right: 10px; padding-left: 10px; padding-right: 10px;}
.test{position:absolute;top:0;right:0;}
body {background: pink;}

Answer 4

This is how I would write it:
On the html file,

<ul id="subnav" >
    <li class="left"><a href="#">Email</a></li>
    <li class="left"><a href="#">Note</a></li>
    <li class="right"><a href="#">Test</a></li>
</ul>

And on the CSS file,

#subnav{
    list-style:none;
    display:inline-block;
    color:blue;
    background:silver;
    padding:5px;
}
.right{
    float:right;
    margin-left:40px;
}
.left{
    float:left;
}