均匀间隔水平导航项

Posted 2023-03-06

【中文标题】均匀间隔水平导航项

【英文标题】：Evenly space horizontal navigation items

【发布时间】：2012-01-14 09:24:09

【问题描述】：

我终于让较长的导航栏项目全部水平显示，而不是垂直堆叠，但我无法让它们与容器中较短的项目均匀分布。我已经尝试了许多我研究过的东西，但无济于事。有任何想法吗？

谢谢！

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

【问题讨论】：

请直接在您的问题中发布您的代码（使用 SO' 降价语法）。 :)

@mac 感谢收看！见上面的编辑。

【参考方案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>

【讨论】：

谢谢你，它是如此接近！我意识到这可能是一个愚蠢的问题，但我正在自学所有这些。你在哪里看到 padding-right: 23px;？它不在我的样式表中。

它看起来像是硬编码的，从一些代码的外观来看，它看起来大部分是自动生成的。例如：mefo1.ecin1prod1lnx1.com/business-information" style="padding-right: 23px; ">

您是否使用特定的东西来生成您的菜单？

啊哈，我越来越后悔使用主题了 ;)。我避免从头开始创建新的导航，但看起来我要进行更多练习。感谢您的帮助，这将有很大帮助。

没问题 - 如果您知道如何使用 jQuery，您可以在页面加载时将所有这些填充值更改为 0。我可以给你写一个可以处理的小脚本，你可以包含它，它可以解决你的问题