html - 在宽度为 100% 的水平条中将具有相同宽度的菜单项居中

Question

我有一个小问题。
我基本上想在中心有一个 ul 菜单，灰色条不会消失。

我试着在这里搜索，大多数答案都与 css display 标签有关，但我尝试了所有选项，但没有一个使菜单位于中间。

这是 fiddle :http://jsfiddle.net/vVH4d/

HTML

<div id="nav" style="margin:auto">
<ul>
    <li><a href="../index.html">Home</a></li>
    <li><a href="../info.html">Info</a></li>
    <li><a href="../chao.html">Chao</a></li>
    <li><a href="../media.html">Media</a></li>
</ul>

CSS

body {background:#192644; margin:0; padding:0;}
#nav {
    font-family: Verdana;
    width: 100%;
    float: left;
    background-color: #303030;
    border-bottom: 3px solid #000;
    text-transform:uppercase; 
    text-align:center;
    font-size:14px;}
#nav ul {
    list-style: none;
    margin: 0 auto;
    padding: 0;
       display: block;
       width: 100%; }
#nav li {display: table-cell }
#nav li a {
    width:100px;
    display: block;
    padding: 12px;
    text-decoration: none;
    font-weight: bold;
    color: #B3B3B3;}
#nav li a:hover {color: #FFF; background-color: #404040; }

Answer 1

改变自

#nav li {display: table-cell }

到

#nav li {display: inline-block }

http://jsfiddle.net/vVH4d/1/