Javascript 根据子对象数量确定的父对象总宽度

我想在UL中根据其子级添加动态宽度。你知道如何使用jQuery或Javascript实现这一点吗

<ul style="width:?">
 <li style="width:50px;float:left;">&nbps;</li>
 <li style="width:50px;float:left;">&nbps;</li>
 <li style="width:50px;float:left;">&nbps;</li>
</ul>

&nbps
&nbps
&nbps

为了适应不断变化的宽度：

试试这个：

<script type="text/javascript" charset="utf-8">
    var intTotalWidth = 0;
    $("ul li").each(function(index, value) {
        intTotalWidth = intTotalWidth + parseInt($(this).innerWidth());     
    });

    $("ul").css("width", intTotalWidth);
</script>

var intTotalWidth=0；
$（“ul li”）。每个函数（索引、值）{
intTotalWidth=intTotalWidth+parseInt（$（this）.innerWidth（））；
});
$（“ul”）.css（“宽度”，intTotalWidth）；

其中，

列表

是对UL元素的引用

顺便说一句，如果您不想硬编码宽度值（

50

），可以这样读取第一个LI元素的宽度：

list.style.width = 
        list.childElementCount * list.firstElementChild.offsetWidth + 'px';

此代码适用于所有当前浏览器，但不适用于IE8及以下版本

现场演示：

---

如果LI元素具有可变宽度：

$('#list').width(function() {
    var width = 0;
    $(this).children().each(function() {
        width += $(this).outerWidth(); 
    });
    return width;
});

---

现场演示：

@Jesse Bunch-我还没做完如果每个列表有不同的宽度？

list.style.width = list.childElementCount * 50 + 'px';

list.style.width = 
        list.childElementCount * list.firstElementChild.offsetWidth + 'px';

$('#list').width(function() {
    var width = 0;
    $(this).children().each(function() {
        width += $(this).outerWidth(); 
    });
    return width;
});