均匀间隔水平导航项 [英] Evenly space horizontal navigation items

问题描述

我终于将较长的导航栏项目全部显示为水平方向，而不是垂直堆叠，但是我无法让较短的项目将它们均匀地放置在我的容器中.我尝试了很多研究，但都无济于事.有任何想法吗?

I've finally gotten my longer nav bar items to all display horizontally instead of stacking vertically, but I cannot get them to space evenly with the shorter items across my container. I've tried a number of things I've researched to no avail. Any ideas?

谢谢！

菜单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/

推荐答案

以下内容可以解决您的问题:

The following should fix your issues:

删除在许多菜单项中找到的右填充.

许多菜单项，特别是<a>标记，都有padding-right: 23px;

Many of the menu items, specifically the <a> tags, have a padding-right: 23px;

对CSS进行以下更改:

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

这将使每个项目根据菜单项目的宽度均匀分布.

This would make each item evenly spaced based on the width of the menu items.

您应该可以使用以下脚本，只需将其放在页面的顶部，即可解决问题:

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

这篇关于均匀间隔水平导航项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！