Question

如何使该列表中的所有元素都具有中心背景，无论元素的宽度如何。

<ul id="menu">
<li><a href="#">Name</a></li>
<li><a href="#">Name</a></li>
<li><a href="#">Name</a></li>
<li><a href="#">Name</a></li>
<li><a href="#">Name</a></li>
</ul>

我的css是这样的：

ul#menu li a { background:url(../images/header-img.png) 0 0 no-repeat; padding:40px 0 0 0; display:block; font-size:12px; color:#000;}

我试过这样，但没有运气：

$("ul#menu li a").each(function(i){
    var value = $(this).width()/2;
    $(this).css('backgroundPosition', value + ' 0');
   });

谢谢！

Answer 1

Florecu，

我终于明白了。

问题是链接没有任何宽度，firebug'em并且您将看到它们的宽度被计算为'auto'，除非您将它们提升为阻止具有显式宽度的级别元素。那么解决方案呢？我们找到'em。

中包含的文本的宽度

以下是解决方案http://jsfiddle.net/aPuhP/1/;和解释，

我们插入一个虚拟span标签，以便能够计算元素的宽度，

    var source = $(this).html();
    var sensor = "<span>" + source + "</span>";
    $(this).html(sensor);

..然后我们计算得到所需宽度所需的宽度和运行计算（-20是为了补偿精灵距离图像左边缘的距离），

   var width = $(this).find('span:first').outerWidth();
   var v = width/2;
   $(this).css('backgroundPosition', v - 20 + 'px 0');

..最后，我们摆脱了虚拟span标签，

   $(this).html(source);

希望这有帮助。

PS ：感谢Calculating text width。

Answer 2

你必须考虑给予元素的40像素宽填充。

水平值必须是第一个，垂直值必须是css语句中的第二个。如果使用小于或大于零的值，则应添加测量单位（px，pc，pt，em）

jQuery - 在每个元素的中间设置背景位置

2 个答案: