Question

I want to add dynamic width in UL according to the its child. Any idea how to do this using jQuery or 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>

Answer 1

$(function(){
    $ul = $('#ul');
    $ul.css('width',($ul.children().length*50)+"px");
    alert($ul.css('width'));
});

http://jsfiddle.net/QctE3/

And to adapt to changing widths:

http://jsfiddle.net/QctE3/1/

$(function(){
    $ul = $('#ul');
    cwidth = parseInt($ul.children('li:first-child').css('width'));
    $ul.css('width',($ul.children().length*cwidth+"px"));
    alert($ul.css('width'));
});