css 将下拉菜单向右对齐

发布于 2024-10-25 00:41:42 字数 882 浏览 1 评论 0原文

我正在使用此页面中的 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:
enter image description here

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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

愛上了 2024-11-01 00:41:42

position:relative; 添加到 .alignRight 并将 right:1px; 添加到 .alignRight div

add a position:relative; to .alignRight and a right:1px; to .alignRight div

自演自醉 2024-11-01 00:41:42

使用这个CSS怎么样?

li .alignRight {
  direction: rtl;
}

或者

li:last-child {
  direction: rtl;
}

How about using this css?

li .alignRight {
  direction: rtl;
}

or

li:last-child {
  direction: rtl;
}
纸短情长 2024-11-01 00:41:42

仅添加 position:relative;right:1px (如 @Thomas Menga 建议)是不够的,这将使下拉菜单达到父元素的完整大小,即在本例中将是按钮,您只需首先将 left 属性重置为 left: auto;,然后设置 right 属性任何你想要的 right:1px;

这里不需要其他额外的东西:-)

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 left property first to left: auto; and then set the right property to whatever you want right:1px;

No need for other extra stuff here :-)

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文