0

我有一个 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>
4

3 回答 3

1

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

一个简单的 jQuery 修复将是这样的：

<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>
于 2013-11-02T13:15:29.173 回答
0

在此处输入图像描述你能试试这个吗

在animated-menu.css（demo url: http://www.runic-paradise.com/）中，改变边距样式如下

ul.menu {
  height: 40px;
  list-style: none outside none;
  margin: auto 25%;
}
于 2013-11-02T12:38:01.150 回答
0

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

于 2013-11-02T12:29:38.020 回答