regola = function(){ // conto il numero di bottoni var n = $( "button" ).length; // calcolo la loro larghezza ESTERNA var bottone = $('button').outerWidth(); // calcolo la larghezza INTERNA del contenitore var contenitore = $('button').parent().innerWidth(); var numerospazi = n + 1; var margine = (contenitore - ( bottone * n )) / numerospazi; $( "button" ).css('margin-left', margine ); $( "button:first-child" ).css('margin-left', margine / 2 ); $( "button:last-child" ).css('margin-right', margine / 2 ); //test $( "button" ).each(function(index, value) { $(this).text(('bott '+ index + '\n left:' + $(this).css("margin-left") + '\n right:' + $(this).css("margin-right"))); }); }();
<div id="wrapper"> <button type="button"></button> <button type="button"></button> <button type="button"></button> <button type="button"></button> </div>
#wrapper{ width:100%; height:80px; border:2px dotted black; margin: 0; padding: 4px 0 4px 0; text-align: center; } button{ height:80px; position:relative; margin: 0; padding: 0; width: 100px; }