Use css tables with table-layout: fixed
– no javascript is necessary.
FIDDLE
To see this working click ‘inspect element’ on one of the li elements of the above fiddle, then right-click ‘delete node’ and walla! – exactly what you need.
Markup
<ul>
<li><span>Item1</span></li>
<li><span>Item1</span></li>
<li><span>Item1</span></li>
<li><span>Item1</span></li>
</ul>
CSS
ul
{
display: table;
table-layout: fixed;
width: 100%;
border: 1px solid #c2c2c2;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
li
{
text-align: center;
display: table-row;
background: pink;
}
span
{
display: table-cell;
vertical-align: middle;
border-top: 1px solid green;
}