css 将下拉菜单向右对齐
我正在使用此页面中的 css/javascript 下拉菜单:
http://javascript-array.com /scripts/simple_drop_down_menu/
虽然我希望最右侧的下拉列表向右对齐:当您将鼠标悬停在“联系人”时,“电子邮件”项目等不会比“顶部的“联系方式”框,如果需要,则从左侧占用空间。 这是一张有助于澄清的图片:
我想拥有一个不同类的最右端,我将
<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>
使用 css:
.alignRight {
float: right;
}
但那不起作用。
如何将下拉菜单“对齐”到右侧?
I am using the css/javascript drop-down menu from this page:
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:
.alignRight {
float: right;
}
but that does not work.
How can I "align" the drop-down to the right?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
将
position:relative;
添加到.alignRight
并将right:1px;
添加到.alignRight div
add a
position:relative;
to.alignRight
and aright:1px;
to.alignRight div
使用这个CSS怎么样?
或者
How about using this css?
or
仅添加
position:relative;
和right:1px
(如 @Thomas Menga 建议)是不够的,这将使下拉菜单达到父元素的完整大小,即在本例中将是按钮,您只需首先将 left 属性重置为left: auto;
,然后设置 right 属性任何你想要的right:1px;
这里不需要其他额外的东西:-)
Just adding a
position: relative;
andright: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 left property first toleft: auto;
and then set the right property to whatever you wantright:1px;
No need for other extra stuff here :-)