css 将下拉对齐到右侧
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5369393/
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 to align drop down to the right
提问by Timothée HENRY
I am using the css/javascript drop-down menu from this page:
我正在使用此页面中的 css/javascript 下拉菜单：
http://javascript-array.com/scripts/simple_drop_down_menu/
http://javascript-array.com/scripts/simple_drop_down_menu/
Though I would like to have the far-right drop-down aligning to the right: when you hover "Contact" that the "Email" item etc do not go further to the right than the "Contact" box at the top, and instead are taking space from the left side if required.
Here is a picture to help clarify:
虽然我希望最右侧的下拉菜单向右对齐：当您将鼠标悬停在“联系人”时，“电子邮件”项目等不会比顶部的“联系人”框更靠右，而是如果需要，从左侧占用空间。这是一张有助于澄清的图片：
I thought of having the far-right of a different class which I would make:
我想拥有一个不同班级的极右翼，我会这样做：
<li class="alignRight"><a href="#" onmouseover="mopen('m5')" onmouseout="mclosetime()">Contact</a>
<div id="m5" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="#">E-mail</a>
<a href="#">Submit Request Form</a>
<a href="#">Call Center</a>
</div>
</li>
with css:
使用 CSS：
.alignRight {
float: right;
}
but that does not work.
但这不起作用。
How can I "align" the drop-down to the right?
如何将下拉菜单“对齐”到右侧？
采纳答案by Thomas Menga
add a position:relative;to .alignRightand a right:1px;to .alignRight div
添加一个position:relative;到.alignRight和一个right:1px;到.alignRight div
回答by Timothy Lee Russell
How about using this css?
使用这个css怎么样？
li .alignRight {
direction: rtl;
}
or
或者
li:last-child {
direction: rtl;
}
回答by Hammad
Just adding a position: relative;and right:1px(as suggested by @Thomas Menga) is not enough, that will make the dropdown the full size of the parent element i.e. which in this case will be the button, you have to just reset the leftproperty first to left: auto;and then set the rightproperty to whatever you want right:1px;
仅添加一个position: relative;和right:1px（如@Thomas Menga 所建议的）是不够的，这将使下拉菜单成为父元素的完整大小，即在这种情况下将是按钮，您必须先将left属性重置为left: auto;然后将正确的属性设置为您想要的任何内容right:1px;
No need for other extra stuff here :-)
这里不需要其他额外的东西:-)
