居中我的css3改變寬度菜單...？

我有一個css菜單，非管理員的寬度爲400，管理員的寬度爲500。如果我將UL寬度設置爲500，則菜單中心對管理員來說很好，很好。但對於非管理員來說，他們的機動性實際上只有400多個......這是非常糟糕的。居中我的css3改變寬度菜單...？

所以我刪除了UL的寬度屬性，嘗試刪除它，然後完全失去了居中;整個菜單現在粘在容器的左側。

任何人都有一個簡單的想法，如何使它始終居中？網站是在這裏： 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>

來源

2013-11-02 runelynx

您的CSS設置ul.menu寬度爲400px。如果用戶是admin，則php腳本將另一個100px寬的li添加到ul.menu。發生這種情況時，必須將ul.menu寬度設置爲500px。如果你這樣做，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-02 13:15:29

我已將此添加到我pag底部的腳本中Ë;即使紫色LI不存在，hwvr將UL寬度設置爲500。也許我應該給li.purple一個ID並嘗試以這種方式找到它？這怎麼可能改變代碼壽？：-x – runelynx

@runelynx哦，對不起！我的錯。只要將if條件改爲'menu.find（'li.purple'）> 0'而不是'menu.find（'li.purple'）'。 –

仍然沒有骰子:(做了一些研究，並將其改變爲此...現在它的工作原理。我想我只是不能使用LI的頁面上的其他任何地方雖然或它會搞亂計數？:)

使用max-width:500px;爲UL.Demo這些http://jsfiddle.net/dhanith/ZMB93/

來源

2013-11-02 12:29:38

這個不幸離開了同樣的問題:(它仍然向左側偏移，使失蹤管理員李菜單項 – runelynx

enter image description here 能否請您試試這個，

在動畫-menu.css（演示網址：http://www.runic-paradise.com/）更改下邊距樣式

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

來源

2013-11-02 12:38:01

空間已經更新。但是它將第五個LI項目切割成一個新的線現在 – runelynx

我已經附上了截圖，這裏看起來很好 –

@ChinnuR不，沒有必要將頂部，底部邊距設置爲自動，還有，左側和右側邊距應該設置爲自動，因爲它首先完成。 –

相關問題

居中我的css3改變寬度菜單...？

回答

相關問題