我怎样才能水平对齐链接

Posted 2023-03-31

【中文标题】我怎样才能水平对齐链接

【英文标题】：How can I Horizontal alignment links

【发布时间】：2013-12-26 13:56:32

【问题描述】：

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

谢谢。

【问题讨论】：

从编写valid HTML 开始。

h1 在 ul 中是无效的 html。

【参考方案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/

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

【讨论】：

谢谢，这正是我想要的！！它现在工作得很好:)

我很高兴能帮上忙。当您在此处就 SO 提出问题时，请确保您接受并“投票”您满意的答案。

【参考方案2】：

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

.menu h1
    float:left;


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

诀窍在于float:left 属性。

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

【讨论】：

谢谢，这正是我想要的。它现在工作得很好:)!!

很高兴它对您有所帮助！如果您不介意，也请接受此答案；）