навигационная информация распределяется равномерно

Я хочу, чтобы моя навигация распространялась равномерно. IE7 и выше, все браузеры. Должен быть отзывчивым.

Сначала я попытался использовать метод отображения таблицы и таблицы-ячейки. Тем не менее, я столкнулся с ie7 и первым и последним ребенком, мне нужно изменить их выравнивание текста. Таким образом, я смотрю еще одно встроенное блочное решение.

Затем я устал от встроенного блока, и мне удалось заставить его работать во всех браузерах до ie7. Я стою перед очередным тупиком. http://jsfiddle.net/AqR8S/1/. Я помню, что встроенный блок может работать с тегом.

Таким образом, что я не с чего начать. :after я знаю т.е. 7 его не поддерживает.

Равномерно расположенная, выровненная горизонтальная навигация ссылки: как убрать вертикальное пространство в пустом :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;
 }