Html CSS 将菜单对齐到 div 的右侧
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18570053/
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
CSS Align Menu to the right of a div
提问by Tom Hanson
I am trying to align a menu to the right of a div. As it stands the menu is sitting in the div top left. I want it top right... what am I missing? I have added text-align: right.... Ive tried float: right... I just can't get it.
我正在尝试将菜单与 div 的右侧对齐。就目前而言，菜单位于左上角的 div 中。我想要它右上角......我错过了什么？我已经添加了 text-align: right .... 我试过 float: right ... 我就是无法理解。
<div id="UserPanel">
<div id="menu">
<ul>
<li><a href="default.php">All Apps</a> | </li>
<li><a href="apps.php">My Account</a> | </li>
<li><a href="newsletter.php">Support</a> | </li>
<li><a href="aboutUs.php">Register / Login</a></li>
</ul>
</div>
</div>
The CSS CODE is
CSS 代码是
#UserPanel
{
width: 962;
height: 98;
background-image: url('bg-topbar.png');
}
#menu
{
text-align: right;
width: 962;
}
#menu ul /* Remove The Bullets */
{
list-style: none;
padding: 0;
margin: 0;
}
#menu li /* Place list in line */
{
float: left;
margin: 0 0.15em;
}
#menu li a /* Design it */
{
font-size: 0.75em;
background: url(background.gif) bottom left repeat-x;
height: 2em;
line-height: 2em;
float: left;
width: 8em;
display: block;
/* border: 0.1em solid #dcdce9; */
color: #C0C0C0;
text-decoration: none; /* Remove Underline */
text-align: center;
}
回答by Roy Sonasish
回答by heretolearn
回答by SaturnsEye
Add float:right;to #userpanel
添加 float:right;到#userpanel
回答by Arif Khan
Try this-
尝试这个-
#menu
{
position:absolute;
top:0;
right:0;
width: 962;
}
回答by LegendaryAks
First of all you have not defined width and height attribute properly. What i mean is either defined it with px or %; e.g width:962px;
首先，您没有正确定义宽度和高度属性。我的意思是用 px 或 % 定义它；例如width:962px;
By the way here is an working example http://jsfiddle.net/hT4Bd/1/
顺便说一下，这里是一个工作示例http://jsfiddle.net/hT4Bd/1/
回答by Yasitha
Update #menu styles as follows.
更新#menu 样式如下。
#menu
{
text-align: right;
width: 962;
float: right;
}
回答by Tom Hanson
None of these worked but I did find Arif Khan gave me an idea. I solved this by doing...
这些都没有奏效，但我确实发现 Arif Khan 给了我一个想法。我通过这样做解决了这个问题...
#menu
{
position: relative;
left: 500px;
}
