JSFiddle - React, Tailwind, and code Playground

by davide pilisi

HTML

<div id="wrapper">
    <button type="button"></button>
    <button type="button"></button> 
    <button type="button"></button> 
    <button type="button"></button> 
</div>

CSS

#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;
}

JavaScript

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"))); 

    });
    
}();