在HTML+；CSS

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

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

<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>

这种方法的问题是箭头的水平对齐。它应该在链接的中心以下，而我无法做到这一点。 我可以使用HTML5或CSS 3

---

有什么帮助吗？

绝对定位方法应该有效，您需要将箭头放在另一个定义了

position:relative

的div内，以便绝对坐标相对于此父div，而不是相对于body元素

但是，我会采用这种方法：

使箭头成为实际a.活动项目背景图像的一部分-这样它将以

背景位置为中心，而不需要任何脚本
 试试这个：

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

.linksWrapper a.active:之后{
内容：url（“images/arrowImg.png”）；
位置：绝对位置；
左：50%；
顶部：30px；
左边距：-/2；/*负数*/
}

旁注：我避免将
{
放在换行符上，因为它在javascript中可能会产生恶劣的影响

诀窍是
left:50%；
通过
marginleft
将位置设置回一半宽度，从而与纠正位置相结合

请看
我很快就把这一点整理好了


因为我不太确定你的代码有多灵活，这是我能想到的最好的

类名为.active的href将继承箭头

//我更新了小提琴以显示它的实际效果。
您的导航列表项目是固定的还是流动的宽度？我也喜欢这个答案。我希望我能将两个答案标记为正确。您在小提琴中的链接已断开。您不需要添加内容：“；如果不是，它将不会显示图像。@Vennsoh我知道，我晚了一年，但正如您所看到的，它的内容属性与图像url一起设置。
.linksWrapper a.active:after {
    content: url("images/arrowImg.png");
    position: absolute;
    left: 50%;
    top: 30px;
    margin-left: - <width-of-your-image> / 2; /* negative number!*/
}