We would like to know how to display: table; Evenly distribute menu items.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.tabs {<!--from ww w. ja v a 2 s .c om-->
display: table;
width: 300px;
border: 1px solid green;
}
.tabs li {
display: table-cell;
border: 1px solid red;
height: 40px;
}
</style>
</head>
<body>
<ul class="tabs">
<li class="tab active" id="tab-1"><span class="tab-title">Tab 1</span></li>
<li class="tab " id="tab-2"><span class="tab-title">Tab 2</span></li>
<li class="tab " id="tab-3"><span class="tab-title">Tab 3</span></li>
<li class="tab " id="tab-4"><span class="tab-title">Tab 4</span></li>
</ul>
</body>
</html>
The code above is rendered as follows: