Javascript 将几个 <li> 之一向右对齐?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5198563/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 16:08:03  来源:igfitidea点击:

Align one of several <li> to the right?

javascripthtmlcss

提问by Michael

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

我在一个网页上有这个。我有 css 对齐它们。但是我希望注销按钮与右侧对齐但在同一条上。如果不让它们全部对齐,我怎么能做到这一点?

回答by ?ime Vidas

CSS:

CSS:

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

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

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



Btw the :last-childpseudo-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:

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

li.right { float:right; }

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

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

回答by Soumya

You might want float: righton the css for the logout link.

您可能需要float: right在 css 上获取注销链接。

回答by quarkdown27

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

像这样?http://jsfiddle.net/QAjkP/

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

您可以使用 id 标签来指定该<li>项目的 css 属性