css - 以未知宽度居中浮动左侧菜单

Question

我想把我的菜单的ul的李元素放在中心，我尝试了很多方法但还是不行。看看我的css：

#menu {
    float: left;
    width: 767px;
    height: 38px;
    margin: 11px 0 0 14px;
    background: url(images/menubg.gif) repeat-x;
    -webkit-border-radius: 0px 0px 7px 7px;
    border-radius: 0px 0px 7px 7px;
    border: 1px solid #efeff1;
}
    #menu ul {
        list-style: none;
        text-align: center;
        padding: 0;
        margin: 0;
        height: 40px;
    }
        #menu ul li {
            float: left;
            color: #767676;
            height: 18px;
            padding: 11px 0px 11px 0px;
            display: inline;
        }
            #menu ul li a {
                font-family: Arial, Helvetica, sans-serif;
                color: inherit;
                font-size: 12px;
                text-decoration: none;
                font-weight: bold;
                display: block;
                padding: 0px 23px 2px 23px;
                border-left: 1px solid #e0e0e2;
            }

我试过 display: inline, text-aling: center，但它不正确。非常感谢提前。

Answer 1

我删除了float并添加inline-block了：

http://jsfiddle.net/dtTdg/1/

#menu ul li {
    display: inline-block;