CSS 背景图片位置问题

at http://www.goodshow.tv I've got a problem with the nav. I have a class that puts an arrow image, which should line up with the right edge of the white border. Problem is, it bases the position on the left side of the text. Is there a more absolute way to position it?

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

2 个解决方案

#1

I'm not sure exactly what you mean but if you take the background off the <a> and .currentpage and put the following on the <li> you get something maybe closer to what you want. Please restate what you want if it's not :-)

我不确定你究竟是什么意思,但如果你从和.currentpage中删除背景并将以下内容放在

上,你会得到更接近你想要的东西。如果不是,请重申你想要的东西:-)

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

I'd probably do this on the <li> instead though:

我可能会在

上做这件事但是:

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

i.e. fix background to right edge and adjust the right padding.

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

You may want to play with the size of your arrow or the line-height of your text for vertical alignment. To my eyes 55% looks better than 50% for vertical and I figure it might be a hack just adjusting this number.

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

#2

I'd go with an option like Graphain recommended. It looks like you have one list for your nav items, and another list for your arrows. You could combine these and make your life a bit easier. :) The idea is that your li elements themseves are wide enough to show the arrows. Then you'd set the background on one of these li's to use the arrow and position it on the right side for the current page. Here's what could be changed style-wise to do something like that...

我会选择像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 */

Also you'd have to change your currentpage from being on the a element to being on the li element (and change the a.currentpage to use something more like

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

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

After that you should be able to remove the arrow div all together.

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

#1