均等なスペースの水平ナビゲーションアイテム

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

をこれは、各項目が均等に基づく間隔になるだろうメニュー項目の幅。

あなたは、次のスクリプトを使用するだけで、あなたのページのheadセクションに配置し、これはあなたの問題を解決すべきであることができるはずです：

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