css - 将列表项放在一行的中心

我不知道如何将清单项目放在一行上：

HTML：

<div id="navbar">
    <ul>
        <li class="navbutton"><a href="#">About</a></li>
        <li class="navbutton"><a href="#">Galleries</a></li>
        <li class="navbutton"><a href="#">Info</a></li>
        <li class="navbutton"><a href="#">Contact Us</a></li>
    </ul>
</div>

CSS：

#navbar{width:960px; height:46px; list-style-type: none; margin:0 auto; margin-top:1px; text-align:center;}
#navbar li{list-style:none; text-align:center; margin:0 auto; background-position:center; background-repeat:no-repeat; padding-left:50px; padding-right:50px;}
.navbutton{background:url(images/nav/lights_lit.jpg); width:138px; height:45px; display:block; background-position:center; background-repeat:no-repeat;}
.navbutton a{background-image:url(images/nav/lights.jpg); width:138px; height:30px; display:block; text-align:center; font-family:Georgia, "Times New Roman", Times, serif; color:#FFF; text-shadow:#000 0px 1px 4px; font-size:16px; padding-top:15px; text-decoration:none; cursor:pointer;  background-position:center; background-repeat:no-repeat;}
#navbar a:hover {background-image: url(images/nav/lights.jpg);background-position:center; background-repeat:no-repeat;}

实时链接：
http://brownbox.net.au/clients/matchlessphotography/

最佳答案

这是您想要的吗？

jsFiddle containing your code

这是我更改的代码。浮动li并摆脱左/右填充：

#navbar li
{
    list-style: none;
    text-align: center;
    margin: 0 auto;
    background-position: center;
    background-repeat: no-repeat;

    float: left;
}

更新

在这种情况下，您必须减小#navbar的宽度，并确保将左右边距设置为auto。这是我在阅读您的评论后所做的事情：

#navbar
{
    width: 566px;
    height: 46px;
    list-style-type: none;
    margin: 0 auto;
    margin-top: 1px;
}

您将必须使用宽度来正确处理。