Question

我无法弄清楚如何将我的列表项目放在一行：

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/

Answer 1

你可以漂浮它

#navbar {
   height:50px;
   width: 500px; /* just an example */
   margin: 0 auto; /*will center */
}
.navbutton{
   background:url(images/nav/lights_lit.jpg); 
   width:118px; 
   height:35px; 
   display:block; 
   background-position:center; 
   background-repeat:no-repeat;
   float:left;
   padding:5px 10px;
}

Answer 2

这是你的意图吗？

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的宽度，并确保左右边距设置为自动。这是我在阅读你的评论后所做的：

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

你必须使用宽度才能使其正确。

中心列表项目在一行上

2 个答案: