水平对齐

Question

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

目前我正在使用display：inline-block，但链接出现在“JEWELLERY”上方。我只想稍微向下移动链接，以便一切都符合要求。

我该怎么做？

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