导航信息均匀分布

Question

我想让我的导航均匀分布。 IE7及以上版本，所有浏览器。必须有回应。

首先，我尝试使用display table和table-cell方法。但是，我面对ie7和第一个和最后一个孩子我需要改变他们的文本对齐。因此，我看另一个内联块解决方案。

接下来我厌倦了inline-block，我设法让所有浏览器工作到ie7。我面临另一个死胡同。 http://jsfiddle.net/AqR8S/1/。我记得inline-block能够处理标签。

因此，我不知道从哪里开始。 ：在我知道之后，即7不支持它。

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;
 }