均勻空間水平導航項目

Question

我終於把我的長導航欄項目水平地顯示出來，而不是垂直堆疊，但我無法讓它們與我的容器中較短的項目保持均勻的空間。我嘗試了很多我研究過的東西，但都無濟於事。有任何想法嗎？

謝謝你！

菜單CSS：

#myslidemenu { 
padding-top: 10px; 
} 
.jqueryslidemenu{ 
width: 100%; 
} 

.jqueryslidemenu ul{ 
margin: 0; 
padding: 0; 
list-style-type: none; 
} 

/*Top level list items*/ 
.jqueryslidemenu ul li{ 
    position: relative; 
    display: inline; 
    float: left; 
    z-index:100; 
    float:left; 
} 

.jqueryslidemenu ul li.first a { 
    margin-left: 0; 
    padding-left: 0; 
} 
/*Top level menu link items style*/ 
.jqueryslidemenu ul li a{ 
display:block; 
width:115px; 
padding:4px 0px; 
text-decoration: none; 
line-height: 20px; 
outline: none; 
text-align:left; 
font-size: 12px; 
color:#7c7c7c; 
} 

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/ 
display: inline-block; 
} 

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{ 
color: #7c7c7c; 
} 

.jqueryslidemenu ul li a:hover, 
.jqueryslidemenu ul li.selected a, 
.jqueryslidemenu ul li.current_page_item a { 
color: #2a7ea0; 
} 

/*1st sub level menu*/ 
.jqueryslidemenu ul li ul{ 
position: absolute; 
left: 0; 
display: block; 
visibility: hidden; 
border:1px solid #cbcbcb; 
border-right:none; 
} 

/*Sub level menu list items (undo style from Top level List Items)*/ 
.jqueryslidemenu ul li ul li{ 
display: list-item; 
z-index: 99999; 
} 

/*All subsequent sub menu levels vertical offset after 1st level sub menu */ 
.jqueryslidemenu ul li ul li ul{ 
border-right:none; 
top: 0; 
} 

/* Sub level menu links style */ 
.jqueryslidemenu ul li ul li a, 
.jqueryslidemenu ul li ul li a:link, 
.jqueryslidemenu ul li ul li a:visited{ 
width: 160px; /*width of sub menus*/ 
margin: 0; 
border-bottom: 1px solid #cbcbcb; 
background: #fff; 
color: #999999; 
padding:8px 20px; 
font-size: 16px; 
} 

.jqueryslidemenu ul li ul li a:hover{ /*sub menus hover style*/ 
background: #EAEAEA; 
color: #2a7ea0; 
} 

/* ######### CSS classes applied to down and right arrow images ######### */ 

.downarrowclass{ 
position: absolute; 
top: 12px; 
right: 7px; 
display: none; 
} 

.rightarrowclass{ 
position: absolute; 
top: 6px; 
right: 5px; 
display: none; 
} 

#menu-wrapper { 
height: 69px; 
margin: 0 auto; 
width: 990px; 

} 
#menu-container { 
    height: 67px; 
width: 990px; 
margin: 0; 
padding: 0; 
background-color: #E6E6DC; 
border-top:1px solid #ffffff; 
border-bottom:1px solid #ffffff; 

} 

或者在這裏：http://pastebin.com/0pf9u70D

直播現場：http://mefo1.ecin1prod1lnx1.com/

Answer 1

以下應該解決您的問題：

刪除許多發現填充右你的菜單項。

許多菜單項，特別是<a>標籤，有一個padding-right: 23px;

進行以下更改你的CSS：

.jqueryslidemenu ul li a 
{ 
    width: auto;    
    margin: 0 20px 0 20px; //Adjust this to fit your needs. 
    ... 
} 

這將使間隔均勻的基礎上，每個項目菜單項的寬度。

您應該可以使用下面的腳本，只需把它放在你的網頁的頭部分，這應該解決您的問題：

<script type='text/javascript'> 
    for(i = 0; i < document.getElementsByClassName('menu-item-object-page').length; i++){ 
    document.getElementsByClassName('menu-item-object-page')[i].firstChild.style.paddingRight = "0px";} 
</script>