均匀间隔水平导航项

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

以下内容应该可以解决您的问题：

删除许多菜单项中的 padding-right。

许多菜单项，特别是<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>