nav infomation spread evenly

Question

I want to make my nav spread evenly. IE7 and above, all the browser. Must be responsive.

First I tried to use the display table and table-cell method. However, I faced with the ie7 and first and last child i need to change their text-align. Thus, I look another inline-block solution.

Next I tired in inline-block and I managed to get it work all the browser till ie7. I face another dead end. http://jsfiddle.net/AqR8S/1/. I remember inline-block is able to work on a tag.

Thus, what I do not where to start. :after I know ie 7 does not support it.

Evenly spaced, justified horizontal nav links: How to remove vertical space in empty :after content

<nav id="menu_btm" class="hidden-xs">
    <a href="#" class="px12">ITEM1</a>
    <a href="#" class="px12">ITEM1</a>
    <a href="#" class="px12">ITEM1</a>
    <a href="#" class="px12">ITEM1</a>
    <a href="#" class="px12">ITEM1</a>
    <a href="#" class="px12">ITEM1</a>
    <a href="#" class="px12">ITEM1</a>
    <a href="#" class="px12">ITEM1</a>
</nav>




 #menu_btm {
     width: 500px;
     height: auto;
     text-align: justify;
     float: left;
     display: table;
 }
 #menu_btm:after {
     content:'';
     width: 100%;
     display: inline-block;
 }
 #menu_btm a {
     color: #d7c06e;
     display: inline-block;
 }
 #menu_btm a:hover {
     color: #b6a464;
 }