css - CSS背景图片位置问题

Question

在http://www.goodshow.tv我遇到了导航问题。我有一个放置箭头图像的类，它应该与白色边框的右边缘对齐。问题是，它基于文本左侧的位置。有没有更绝对的定位方式？

Answer 1

我不确定您的意思，但是如果您将背景从 <a> 和 .currentpage 中取出，并将以下内容放在 <li> 上，您可能会得到更接近您想要的东西。如果不是，请重述您想要的内容:-)

background: transparent url(http://www.goodshow.tv/images/nav_arrow.png) no-repeat scroll 95% 50%

不过，我可能会在 <li> 上这样做：

background: transparent url(http://www.goodshow.tv/images/nav_arrow.png) no-repeat scroll 100% 50%
padding:8px 20px 7px 0;

即将背景固定到右边缘并调整右填充。

您可能希望使用箭头的大小或文本的行高来进行垂直对齐。在我看来，55% 看起来比垂直 50% 好，我认为这可能只是调整这个数字。

Answer 2

我会选择像 Graphain 推荐的选项。看起来您有一个用于导航项目的列表，以及另一个用于箭头的列表。您可以将这些结合起来，让您的生活更轻松。:) 这个想法是你的 li 元素它们的宽度足以显示箭头。然后，您将在其中一个 li 上设置背景以使用箭头并将其定位在当前页面的右侧。这是可以在风格方面进行更改以执行此类操作的内容...

#nav { width:240px; } /* should go all the way to that vertical area where there arrows are) */
#nav li.currentpage { background:url(images/nav_arrow.png) no-repeat right center; } /* add the error */
#nav ul li { margin-right:30px; } /* will add a bit of spacing after each lit between the text and the arrow */

此外，您还必须将当前页面从 a 元素更改为 li 元素（并更改 a.currentpage 以使用更像

#nav ul li.currentpage a {} /* your current a.currentpage style */

之后，您应该能够一起删除箭头 div。