Make List Item Behave as Table Cell

[email protected]

HTML

This is a demonstration of how to make an unordered list behave as a table with even cells. Enjoy!<br/><br/>
<div>
    <ul>
        <li><a href="#">List Item</a></li>
        <li><a href="#">Listhhhhhhhhhhhhhhhhh Item</a></li>
        <li><a href="#">List Item</a></li>
         <li><a href="#">List Item</a></li>
       
    </ul>
     <ul>
        <li><a href="#">List ghjhhhhhhhhhhhhhhhhhhhh</a></li>
        <li><a href="#">Listhhhhhhh Item</a></li>
        <li><a href="#">List Item</a></li>
         <li><a href="#">List Item</a></li>
       
    </ul>
     <ul>
        <li><a href="#">List Item</a></li>
        <li><a href="#">List Item</a></li>
        <li><a href="#">List Item</a></li>
         <li><a href="#">List Item</a></li>
       
    </ul>
</div>
<br/>
<a href="mailto:[email protected]">Ryan Brackett</a>

CSS

body {
    font-family: arial; font-size: 13px; padding: 20px;
}
div {
    display: table;
    width: 100%;
}
div > ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
    display: table-row;
}
div > ul > li {
    padding: 0px;
    margin: 0px;
    display: table-cell;
    width: 20%; /* 100 divided by the number of links*/
    text-align: center;
}
div > ul > li > a {
    padding: 20px 0px;
    display: block;
    background-color: #f5f5f5;
    border: 1px solid #dedede;
    text-decoration: none;
    margin: 2%;
}