html - How can I make list item with uniform length? -

i creating unordered list horizontal tab component. want each list item filling in 1 of 3 boxes uniform length , height shown on image. here jsfiddle , javascript. should change on css make happen?

$(function(){     $('#tabs').tabs({         event: "mouseover"     }); }); 

https://jsfiddle.net/m1xhc4v5/6/

add these 3 values css:

 #tabs li{     display: inline-block;     text-align: center;     width: 30%; } 

you need make element inline-block receive width. used 30% allow borders, can fine-tune ever value like.

jsfiddle