将几个<li>中的一个对齐到右边？

Question

    <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>

我在网页上有这个.我有css对齐它们.但是我希望注销按钮与右边对齐但在同一个栏上.如果不将它们全部对齐,我怎么能这样做呢？

Answer 1

CSS:

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

现场演示: http ://jsfiddle.net/simevidas/Rs4Sa/

顺便说一句,:last-child伪类在IE8(及以下版本)中不起作用.如果您希望它在这些浏览器中工作,则必须将一个类(例如right)分配给Logout LI项,然后:

li.right { float:right; }

现场演示: http ://jsfiddle.net/simevidas/Rs4Sa/1/