How can I Horizontal alignment links

Question

I'm creating a website using HTML and CSS on macromedia and in one of my divs I want the JEWELLERY text to be horizontally in line with the links.

At present I'm using the display:inline-block, but the links are appearing above "JEWELLERY". I just want to move the links downwards a bit so everything is in line.

How do I do this?

<div class="menu content">
    <h1 class="style1">JEWELLERY</h1>   
    <ul id="nav">       
      <li><a href="">   Home            </a></li>
      <li><a href=""> Jewellery     </a></li>
      <li><a href=""> Locations     </a></li>
      <li><a href=""> Contact Us        </a></li>
      <li><a href=""> Reviews           </a></li>
    </ul>       
</div>

Thanks.

Answer 1

You should not use a h1 tag inside a unordered list element (ul). Do this instead:

<div class="menu content">

    <h1>JEWELLERY</h1>  

    <ul id="nav">   
        <li><a href=""> Home            </a></li>
        <li><a href=""> Jewellery       </a></li>
        <li><a href=""> Locations       </a></li>
        <li><a href=""> Contact Us      </a></li>
        <li><a href=""> Reviews         </a></li>
    </ul>    

</div>

And with something like the following css

.menu {
    text-align: center;
}

#nav{
    list-style: none;
    padding-left: none;
}    
#nav li {
    display: inline-block;
}    

See here http://jsfiddle.net/r8zW5/

That would line them up horizontally. Is this what you meant?

Answer 2

I think this is the css you're looking for:

.menu h1{
    float:left;
}

#nav{
    list-style: none;
    padding-top:35px;
} 
#nav li {
    display: inline-block;
} 

The trick is the float:left property.

Here's the fiddle: http://jsfiddle.net/m2p53/