Question

我在CSS中导航的活动状态遇到问题。我希望箭头与容器对齐，指向活动链接，但除非我使用背景图像向上移动文本，否则它不会对齐。箭头需要偏离文本。对于任何反馈，我们都表示感谢！谢谢！

#mainNav ul li.current a,
#mainNav ul li.current-cat a,
#mainNav ul li.current_page_item a,
#mainNav ul li.current-menu-item a,
#mainNav ul li.current-post-ancestor a,
#mainNav ul li.current_page_parent a,
#mainNav ul li.current-category-parent a,
#mainNav ul li.current-category-ancestor a,
#mainNav ul li.current-portfolio-ancestor a,
#mainNav ul li.current-projects-ancestor a
{
  background: url(http://www.jamiestarcevich.com/wp-content/uploads/2012/12/triangle.png);
  background-repeat: no-repeat;
  background-position:center top;
}

Answer 1

您可以使用像素或百分比代替普通center,top将箭头准确定位在您想要的位置

如果您需要箭头空间，请使用padding-left（或padding-right如果RTL）

附注：查看代码，您可能需要考虑使用支持嵌套规则的LESS等CSS扩展，这样您就不必一次又一次地重复该元素

如何在CSS中移动背景图像，同时不随文本移动文本？

1 个答案: