在HTML + CSS中的活动菜单项下添加箭头 [英] Add an arrow under the active menu item in HTML+CSS

问题描述

我正在尝试生成如下所示的菜单：

I am trying to generate a menu like the following:

菜单中有几个项目，活动项目后面有一个箭头。
菜单项是如下代码的标签：

There are several items in the menu and the active one has an arrow after it. The menu items are tags like the following code:

<div class="menuCenter">
     <div class="linksWrapper">
      <a href="#">Home</a>
      <a class="menuCenterLinkLeft" href="#">Plans & Pricing</a>
      <a class="menuCenterLinkLeft" href="#">Sign In</a>
      <a class="menuCenterLinkLeft active" href="#">Sign Up</a>
      <a class="menuCenterLinkLeft" href="#">Contact</a>
     </div>
</div>

我尝试两个选项：
1-使用javascript绝对定位箭头图像。我在调整页面大小时有问题。
2-使用：after伪元素，像这样：

I tryied two options: 1- Absolutely positioning the arrow image with javascript. I have problems when resizing the page. 2- Using the :after pseudo element, like this:

.linksWrapper a.active:after
{
    content: url("images/arrowImg.png");
    position: relative;
    left: -40px;
    top: 30px; 
}

这种方法的问题是箭头水平对齐。它应该在链接的中心以下，我不能achive。
我可以使用HTML5或CSS 3。

The problem with this approach was the horizontal alignment of the arrow. It should be below the center of the link and I could not achive that. I can use HTML5 or CSS 3.

任何帮助？

推荐答案

试试这个：

.linksWrapper a.active:after {
    content: url("images/arrowImg.png");
    position: absolute;
    left: 50%;
    top: 30px;
    margin-left: - <width-of-your-image> / 2; /* negative number!*/
}

sidenote：

sidenote: I avoid putting { on a newline, since it may have nasty effects in javascript.

诀窍是 left：50 ％; 结合通过 margin-left 将其设置为一半宽度来修正位置。

The trick is left:50%; combined with correcting the position by setting it back half width via margin-left.

请参阅 示例 。

See example.

这篇关于在HTML + CSS中的活动菜单项下添加箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！