在 HTML+CSS 中的活动菜单项下添加箭头
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10391343/
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
Add an arrow under the active menu item in HTML+CSS
提问by Tony
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>
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:
我尝试了两个选项： 1- 绝对使用 javascript 定位箭头图像。调整页面大小时遇到问题。2- 使用 :after 伪元素，如下所示：
.linksWrapper a.active:after
{
content: url("images/arrowImg.png");
position: relative;
left: -40px;
top: 30px;
}
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.
这种方法的问题是箭头的水平对齐方式。它应该低于链接的中心，我无法实现。我可以使用 HTML5 或 CSS 3。
Any help?
有什么帮助吗？
回答by Christoph
Try this:
尝试这个：
.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: I avoid putting {on a newline, since it may have nasty effects in javascript.
旁注：我避免{换行，因为它可能会在 javascript 中产生不良影响。
The trick is left:50%;combined with correcting the position by setting it back half width via margin-left.
该技巧left:50%;与通过将其设置回一半宽度来校正位置相结合margin-left。
See example.
参见示例。
回答by Karl Keefer
The absolute positioning approach should work, you need to put the arrow inside of another div that has position:relativedefined, so that the absolute coordinates are relative to this parent div, instead of being relative to the body element.
绝对定位方法应该可行，您需要将箭头放在另一个已position:relative定义的div 内，以便绝对坐标相对于该父 div，而不是相对于 body 元素。
However, I would go with this approach instead:
但是，我会采用这种方法：
Make the arrow a part of the background image of the actual a.active items - this way it will center with background-positionand you don't need any scripting!
使箭头成为实际 a.active 项目的背景图像的一部分 - 这样它就会居中background-position并且您不需要任何脚本！
回答by jake
I put this together really quick..
我把它放在一起真的很快..
Because I wasn't too sure how flexible your code could be, this is the best I could come up with.
因为我不太确定你的代码有多灵活，这是我能想到的最好的方法。
Which ever href has the classname of .active will inherit the arrow
具有 .active 类名的 href 将继承箭头
// I updated the fiddle to show it in action.
// 我更新了小提琴以显示它的实际效果。
