中心改变宽度的css3菜单......？

Question

我有一个css菜单，对于非管理员来说宽度为400，而管理员的宽度为500。如果我将UL宽度设置为500，则菜单中心可以很好地管理员。但对于非管理员来说，他们的mneu实际上只有400宽......这是不合时宜的。

所以我从UL中删除了width属性来尝试删除它，然后它完全失去了居中;现在整个菜单都粘在容器的左侧。

任何人都有一个简单的想法，如何让它始终居中？网站在这里： http://www.runic-paradise.com/

ul.menu{
    height: 40px;
    list-style: none outside none;
    margin: 0 auto;
    /*width: 500px;*/
}

/*li{
    width:100px;
    height:50px;
    float:left;
    color:#191919;
    text-align:center;
    overflow:hidden;
}*/

a.menu{
    color:#FFF;
    text-decoration:none;
}

p.menu{
    padding-top: 10px;
    padding-right: 5px;
    padding-left: 5px;
}

    .subtext{
    padding-top: 10px;

    }

ul.menu li{
    width: 100px;
    height: 40px;
    float: left;
    color: #191919;
    text-align: center;
    overflow: hidden;
}

/*Menu Color Classes*/
.green{
    background:#6AA63B url('/img/menu/green-item-bg.jpg') top left no-repeat;
}    
.yellow{
    background:#FBC700 url('/img/menu/yellow-item-bg.jpg') top left no-repeat;
}    
.red{
    background:#D52100 url('/img/menu/red-item-bg.jpg') top left no-repeat;
}    
.purple{
    background:#5122B4 url('/img/menu/purple-item-bg.jpg') top left no-repeat;
}    
.blue{
    background:#0292C0 url('/img/menu/blue-item-bg.jpg') top left no-repeat;
}





<ul class="menu">
    <li class="green">
        <p class="menu"><a href="/" class="menu">Home</a></p>
        <p class="subtext">The front page</p>
    </li>
    <li class="yellow">
        <p class="menu"><a href="#" class="menu">-</a></p>
        <p class="subtext">More info</p>
    </li>
    <li class="red">
        <p class="menu"><a href="/forums/" class="menu">Forums</a></p>
        <p class="subtext">Get in touch</p>
    </li>
    <li class="blue">
        <p class="menu"><a href="#" class="menu">-</a></p>
        <p class="subtext">Send us your stuff!</p>
    </li>
<?php
if ($user->data['group_id'] == 5)
{
   echo '   <li class="purple">
        <p class="menu"><a href="#" class="menu">Admin</a></p><p class="subtext">Legal things</p>
    </li>';
}

?>
</ul>

Answer 1

您的CSS将ul.menu宽度设置为400px。如果用户是admin，则php脚本会向ul.menu添加另一个100px宽的li。发生这种情况时，您必须将ul.menu宽度设置为500px。如果这样做，css规则margin:0px auto;将按预期处理居中。

简单的jQuery修复就像 this：

<script>
$(document).ready(function() {
    var menu=$('ul.menu');
    if(menu.find('li')>4) {
        //if there are more then 4 menu items, reset menu width to 500px
        menu.css('width','500px');
    }
});
</script>

Answer 2

将max-width:500px;用于这些http://jsfiddle.net/dhanith/ZMB93/

的UL.Demo

Answer 3

你能试试吗，

在animated-menu.css（演示网址：http://www.runic-paradise.com/）中，更改边距样式如下所示

ul.menu {
  height: 40px;
  list-style: none outside none;
  margin: auto 25%;
}