Dividing a ul so one li is on the right side

HTML & CSS
1

i need to have a navigation bar that looks like this:
ONE | TWO | THREE FOUR

Is it a good practice to solve the problem like this:


<ul>
 <li>ONE</li>
 <li>TWO</li>
 <li>THREE</li>
 <li class="right">FOUR</li>
</ul>

CSS
li{
 display:inline;
 float:left;
}
li.last{
 float: right;
}

thanks very much in advance.

2

I’d say yes… there are the CSS properties ‘last-child’ and ‘nth-child’, but browser support is spotty at best for them… though I would suggest using the class “last” to say WHAT it is, instead of “right” saying “how it’s going to appear” – since it’s possible it might not be displayed “right” in all your different media targets (like print… handheld, media queries for device capabilities) – you are using the MEDIA attribute on your LINK to the css, right?

Remember, HTML is for saying what things ARE, not what they look like.