如何居中对齐水平菜单？

  • Z时代
  • 2024-01-10
  • 分类：问答

我需要居中对齐水平菜单。

我尝试了各种解决方案，包括inline-block/ block/ center-align等等的组合，但是没有成功。

这是我的代码：

<div class="topmenu-design">
    <!-- Top menu content: START -->
    <ul id="topmenu firstlevel">                                                                                       
      <li class="firstli" id="node_id_64"><div><a href="#"><span>Om kampanjen</span></a></div></li>
      <li id="node_id_65"><div><a href="#"><span>Fakta om inneklima</span></a></div></li>
      <li class="lastli" id="node_id_66"><div><a href="#"><span>Statistikk</span></a></div></li>
    </ul>
    <!-- Top menu content: END -->
</div>

我知道如何中心对齐的ul内部div。可以使用Sarfraz的建议来完成。但是列表项仍然浮动在内ul。

我需要Java语言来完成此操作吗？

回答：

前提很简单，基本上只涉及一个无宽度的浮动包装，该浮动包装浮动到左侧，然后从屏幕上移到左侧的宽度位置。左：-50％。接下来，将嵌套的内部元素反转，并应用+50％的相对位置。这样可以将元素固定在中心位置。相对定位可保持流量，并允许其他内容在下方流动。

回答：

#buttons{
    float:right;
    position:relative;
    left:-50%;
    text-align:left;
}
#buttons ul{
    list-style:none;
    position:relative;
    left:50%;
}
#buttons li{float:left;position:relative;}/* ie needs position:relative here*/
#buttons a{
    text-decoration:none;
    margin:10px;
    background:red;
    float:left;
    border:2px outset blue;
    color:#fff;
    padding:2px 5px;
    text-align:center;
    white-space:nowrap;
}
#buttons a:hover{ border:2px inset blue;color:red;background:#f2f2f2;}
#content{overflow:hidden}/* hide horizontal scrollbar*/
<div id="buttons">
    <ul>
        <li><a href="#">Button 1</a></li>
        <li><a href="#">Button 2's a bit longer</a></li>
        <li><a href="#">Butt 3</a></li>
        <li><a href="#">Button 4</a></li>
    </ul>
</div>

以上是 如何居中对齐水平菜单？ 的全部内容， 来源链接： utcz.com/qa/411234.html

回到顶部