如何中心对齐水平< UL>菜单？ [英] How do I center align horizontal <UL> menu?

问题描述

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

我尝试了各种解决方案，包括 inline-block / block / center-align 等，但未成功。

I need to center align a horizontal menu.
I've tried various solutions, including the mix of inline-block / block / center-align etc., but haven't succeeded.

这里是我的代码：

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

UPDATE

我知道如何使 ul 在 div 中居中对齐。这可以使用Sarfraz的建议来完成。
但是列表项仍悬浮在 ul 中。

I know how to center align the ul within the div. That can be accomplished using Sarfraz's suggestion. But the list items are still floated left within the ul.

我需要Javascript才能完成这？

Do I need Javascript to accomplish this?

推荐答案

从 http://pmob.co.uk/pob/centred-float.htm ：

前提是简单的，基本上只是一个无宽度的浮动包装器浮动到左边，然后移到屏幕左边的宽度位置：relative;左：-50％。接下来，嵌套的内部元素被反转，并应用+ 50％的相对位置。这具有将元件放置在中心的效果。相对定位保持流动并允许其他内容在其下流动。

The premise is simple and basically just involves a widthless float wrapper that is floated to the left and then shifted off screen to the left width position:relative; left:-50%. Next the nested inner element is reversed and a relative position of +50% is applied. This has the effect of placing the element dead in the center. Relative positioning maintains the flow and allows other content to flow underneath.

代码

Code

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

这篇关于如何中心对齐水平< UL>菜单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！