动态添加的html如何获取宽度,jquery动态添加元素后，获取元素宽度与实际宽度不一致...

代码如下

Slideout Demo

.product_list_con{

text-align: center;

}

.product_list{

display: inline-block;

}

.product_list li{

display: inline-block;

}

.product_list li img{

display: block;

}

var pros=[

{imgSrc:"app/images/img_home/pro_1.jpg",imgAlt:"产品1",productName:'产品1'},

{imgSrc:"app/images/img_home/pro_2.jpg",imgAlt:"产品1",productName:'产品1'},

{imgSrc:"app/images/img_home/pro_3.jpg",imgAlt:"产品1",productName:'产品1'},

{imgSrc:"app/images/img_home/pro_4.jpg",imgAlt:"产品1",productName:'产品1'},

{imgSrc:"app/images/img_home/pro_5.jpg",imgAlt:"产品1",productName:'产品1'},

{imgSrc:"app/images/img_home/pro_6.jpg",imgAlt:"产品1",productName:'产品1'},

{imgSrc:"app/images/img_home/pro_7.jpg",imgAlt:"产品1",productName:'产品1'},

{imgSrc:"app/images/img_home/pro_8.jpg",imgAlt:"产品1",productName:'产品1'}

];

var html="";

for(let i=0;i

html+=`

`+pros[i].productName+`

`

}

var oProductList=$("#product_list");

oProductList.append(html);

console.log($("#product_list li").width())

console.log($("#product_list li"))

console.log(document.getElementsByTagName("li")["0"].offsetWidth);

// console.log(oProductList.children('li'));

效果图：

描述：

如代码所示，动态添加八个li到product_list 元素中，然后获取li的宽度，在谷歌浏览器中，元素审查实际宽度为如图所示：

如图所示：

依次为jquery打印元素li的宽度width、页面li元素、原生js打印offsetWidth；

检查元素的属性发现如下图所示：

在这里看到offsetWidth和clientWidth都是56像素宽度，但是打印出的元素宽度却是41像素

百度不得其解，若你知道原因，请为我解惑，不胜感激！