0

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

目前我正在使用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>

谢谢。

4

2 回答 2

0

我认为这是您正在寻找的CSS：

.menu h1{
    float:left;
}

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

诀窍是float:left财产。

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

于 2013-12-09T13:17:38.680 回答
0

不应在无序列表元素 (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/

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

于 2013-12-09T12:54:04.530 回答