Align to the right?

Question

I am trying to align the last element in a list to the right:

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li id="right">right?</li>
</ul>

li {
    display: inline-block;
    margin: 0;
    padding: 2px;
}
ul {
    width: 300px;
    list-style: none;
    margin: 0;
    padding: 0;
}
li#right {
    text-align: right;
}

It does not work so I guess I am misunderstanding something fundamentally. But what?

There is a fiddle here: http://jsfiddle.net/lborgman/b22g7/

Answer 1

You can absolutely position the last element to achieve what you want without having to apply any clearfix to correct issues caused by float.

ul {
    width: 300px;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
li#right {
    position: absolute;
    right: 0px;
}

JSFiddle

Answer 2

text-align aligns the element's text to the right. Which it is doing. You just can't see it. If you had blah blah blah<br />blah in that <li> you'd see the alignment clear as day.

If you want the <li> itself to be on the right, try using float:right but keep in mind that you may need to move it to be the first one.

Answer 3

Here's one way to do it:

http://jsfiddle.net/b22g7/6/

HTML:

<div class="container">
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li id="right">right?</li>
    </ul>
</div>

CSS:

.container {
    overflow: auto;
}

ul {
    width: 300px;
    list-style: none;
    margin: 0;
    padding: 0;
    background: #ff3;
}

li {
    float: left;
    border: solid 1px blue;
    margin: 0;
    padding: 2px;
}

li#right {
    float: right;
}

Answer 4

You meant float: right; instead of text-align.

text-align will just align the text 'within' the li

Answer 5

Just add li:last-child{float:right;} and remove the id, you don't need it