Html 使用 CSS3 使列表中的项目右对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16425420/
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
Make an item in list align to right using CSS3
提问by user2091061
I have a list as follows :
我有一个列表如下：
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Work</a>
<ul>
<li><a href="#">CSS Development</a></li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Development Tools</a></li>
<li><a href="#">Web Design</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Feedback</a></li>
</ul>
I am attaching image of so far what i have done.
我附上了到目前为止我所做的事情的图像。
In this menu,I want to align feedback to right side. Can anyone tell how to do it?
在这个菜单中，我想将反馈对齐到右侧。谁能告诉怎么做？
回答by PSL
回答by Minko Gechev
Just use float: right;:
只需使用float: right;：
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Work</a>
<ul>
<li><a href="#">CSS Development</a></li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Development Tools</a></li>
<li><a href="#">Web Design</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
<li style="float: right;"><a href="#">Feedback</a></li>
</ul>
You can check the demo here.
回答by Absolute?ER?
Aside from floatyou can also use position:absoluteinside of a position:relativecontainer. (Inline css for example purposes only.)
除此之外，float您还可以position:absolute在position:relative容器内部使用。（内联 css 仅用于示例目的。）
<ul id="menu" style="position:relative;width:1008px;height:40px;display:block;">
<li class="right" style="position:absolute;right:20px;">
<a href="#">Feedback</a></li>
回答by JoshYates1980
This will pull the entire menu to the right and have the dropdown sub menu pull right also instead of displaying off the screen.
这会将整个菜单拉到右边，下拉子菜单也拉到右边，而不是显示在屏幕外。
<div class="top-menu">
<ul class="nav navbar-nav pull-right"><li class="dropdown dropdown-user">
<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
<i class="icon-settings"></i>
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu pull-right">
<li>
<a href="page_user_profile_1.html">
<i class="icon-user"></i> My Profile
</a>
</li>
</ul>
</li>
</ul>
</div>
