如何进行水平对齐链接

Question

我正在macromedia上使用HTML和CSS创建一个网站，在我的一个div中，我希望JEWELLERY文本与链接水平对齐。

目前我使用的是display:inline-block，但链接出现在上面；珠宝"；。我只想把链接向下移动一点，这样一切都是一致的。

我该怎么做？

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

谢谢。

Answer 1

您不应该在无序列表元素（ul）中使用h1标记。改为：

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

使用类似以下css 的东西

.menu {
    text-align: center;
}
#nav{
    list-style: none;
    padding-left: none;
}    
#nav li {
    display: inline-block;
}    

请参阅此处http://jsfiddle.net/r8zW5/

这将使它们水平排列。这就是你的意思吗？

Answer 2

我想这就是你要找的css：

.menu h1{
    float:left;
}
#nav{
    list-style: none;
    padding-top:35px;
} 
#nav li {
    display: inline-block;
} 

诀窍在于float:left属性。

小提琴在这儿：http://jsfiddle.net/m2p53/