Question

我有一个下拉菜单（代码可以在下面看到），效果很好。我需要做的一件事是每个顶级li（ul.lv1 li）都有相同的填充。我可以在那里找到大量相同宽度的例子，但我需要的是不同的宽度和相同的填充。

有人可以帮忙吗？

<ul class="topnav lv1">
  <li class="first hasChildren"><a href="/" class="first">Home</a></li>
  <li><a href="/what-we-do.aspx">What we do</a></li>

  <li><a href="/client-managed-services.aspx">Client managed services</a></li>
  <li><a href="/candidate-managed-services.aspx">Candidate managed services</a></li>
  <li class="active activelast last hasChildren"><a href="/added-value-managed-services.aspx" class="active activelast last">Added value managed services</a><ul class="lv2">
      <li><a href="/added-value-managed-services/about-berrisford.aspx">About Berrisford</a></li>
      <li class="last"><a href="/added-value-managed-services/service.aspx" class="last">Service</a></li>
    </ul>

  </li>
</ul>

Answer 1

可以这样做：

var finalWidth=940;
var totWidth=0;

var lis=$("ul.lv1 > li").each(function(){
    totWidth+=$(this).width(); 
});

var diff=finalWidth-totWidth;

if(diff>0){
    var diffPer=diff/lis.length;

    lis.each(function(){
        $(this).css('padding-right',diffPer);
    });
}

Answer 2

在实施了Kingjiv的解决方案后，我发现我真正需要的是将填充物放在标签上而不是li上，最终的工作代码如下所示，向kingjiv寻求帮助。

var finalWidth = 940;
var totWidth = 0;

var lis = $("ul.lv1 > li").each(function () {
    totWidth += $(this).width();
});

var diff = finalWidth - totWidth;

if (diff > 0) {
    var diffPer = diff / lis.length;
    $("ul.lv1 > li a").each(function () {
        $(this).css('padding-right', diffPer / 2);
        $(this).css('padding-left', diffPer / 2);
    });
}

在顶级li上下拉菜单相等的填充

2 个答案: