将水平导航栏内的左浮动元素居中？

Question

所以我有这个导航栏，你可以看到这里 -

http://codepen.io/anon/pen/FJGvg/

我试图均匀空间导航栏内的元素，我不能让它为生活工作我。我尝试了很多东西。下面是代码：

<ul id="menu"> 
    <li><a>Test</a></li> 
    <li><a>Test Different Length </a></li> 
    <li><a>Test Again</a></li> 
    <li><a>Test23</a></li> 
</ul> 

#menu { 
    width: 50%; 
    min-width: 700px; 
    margin: auto; 
    margin-top: 10px; 
    padding: 10px 0 0 0; 
    list-style: none; 
    text-align: center; 
    background-color: #111; 
    background-image: linear-gradient(#444, #111); 
    border-radius: 18px; 
    /* box-shadow: 0 2px 1px #9c9c9c;*/ 
} 

#menu li { 
    display: inline; 
    margin-left: auto; 
    width: 25%; 
    float: left; 
    padding: 0 0 10px 0; 
    position: relative; 
} 

#menu a { 
    float: left; 
    height: 25px; 
    padding: 0 25px; 
    color: #999; 
    text-transform: uppercase; 
    font: bold 12px/25px Arial, Helvetica; 
    text-decoration: none; 
    text-shadow: 0 1px 0 #000; 
} 

#menu li:hover > a { 
    color: #fafafa; 
} 

/* Clear floated elements */ 
#menu:after { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
} 

Answer 1

#menu { 
    width: 50%; 
    min-width: 700px; 
    margin: 10px auto 0 auto; 
    padding: 5px 0; 
    list-style: none; 
    text-align: center; 
    background-color: #111; 
    background-image: linear-gradient(#444, #111); 
    border-radius: 18px; 
    /* box-shadow: 0 2px 1px #9c9c9c;*/ 
} 

#menu li { 
    display: inline-block; 
    width: 23%; 
    position: relative; 
    padding:0; 
} 

#menu a { 
    height: 25px; 
    color: #999; 
    text-transform: uppercase; 
    font: bold 12px/25px Arial, Helvetica; 
    text-decoration: none; 
    text-shadow: 0 1px 0 #000; 
} 

#menu li:hover > a { 
    color: #fafafa; 
} 

/* Clear floated elements */ 
#menu:after { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
}