Question

I can’t work out how to get my list items on one line:

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;}

Live Link:
http://brownbox.net.au/clients/matchlessphotography/

Answer 1

Is this what you intended?

jsFiddle containing your code

Here’s the code I changed. Float the li and get rid of the left/right padding:

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

    float: left;
}

UPDATE

In that case, you have to reduce the width of the #navbar and make sure the left and right margins are set to auto. Here’s what I did after reading your comment:

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

You will have to play with the width to get it right.