Question

我正在尝试将动态元素水平居中到具有不同宽度的dom级父级。

我把一切都放下了，但我只是在计算错误。任何帮助将不胜感激。

注意：我需要居中的项目的宽度是20px

脚本

$(function() {

$(".nav-menu").children("li").each(function() {

    $(this).on( "mouseenter", function(){   
    listWidth = $(this).find("a").width() /2 ; //<-- calculating width of each li
        $(this).find(".sub").prepend('<li id="nav-hover-state"></li>');
        $(this).find("#nav-hover-state").attr('style', 'margin-left:'+listWidth +'px');
    });

    $(this).on( "mouseleave", function(){   
        if($('.nav-container ul.nav-menu li .sub').attr('style','display:none')) {
        $(this).find("#nav-hover-state").remove();

    }
    });
});

Answer 1

减去内部元素大小的一半

listWidth = ($(this).find("a").width() /2) - 10 ; //<-- calculating width of each li

Jquery - 水平居中元素到父元素

1 个答案: