Question

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

Answer 1

我不确定你的意思，但如果你把背景从＆lt; a＆gt;和.currentpage并在＆lt; li＆gt;上添加以下内容你得到的东西可能更接近你想要的东西。如果不是，请重申你想要的东西： - ）

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

我可能会在＆lt; li＆gt;上执行此操作。相反，但是：

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

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

的内容）

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

之后你应该能够一起移除箭头div。

CSS <li>背景图片位置问题</li>

2 个答案: