导航菜单对齐CSS

Question

我想让site上的导航菜单均匀地跨越宽度。 Here是我要完成的一个示例，请注意链接如何均匀分布并拉伸导航栏的整个宽度。

我不确定用什么代码来完成此任务。我试过保证金：自动，但似乎没有用。

这是我的CSS：

.mainNav{ 
  height:30px; 
  padding-bottom:0px; 
  margin:0 !important;
  position: relative; 
  border-top: 1px #d5d5d5 solid;
  border-bottom: 1px #d5d5d5 solid;
}
.mainNav a { 
  font-size:16px; 
  -webkit-transition:none; 
  -moz-transition:none; 
  -o-transition:none; 
  transition:none;
  position: relative;              
}   
.mainNav ul { 
  list-style-type: none; 
  list-style-image: none; 
}
.mainNav li {
  float:left;                   
  margin: 0 auto;
  position: relative; 
  list-style-type: none; 
  list-style-image: none; 
}   
.mainNav li a { 
  text-transform:uppercase; 
  padding:0 0 0 36px; 
  display:block; 
  padding-bottom:13px;  
}
.mainNav li ul { 
  display: none; 
  margin:0 !important; 
}
.mainNav li:hover > ul, .mainNav li.hover > ul { 
  display: block; 
  position: absolute; 
  top: 35px; 
  left: 0; 
  z-index: 1000; 
  width: 180px; 
}
.mainNav li  > ul { 
  height:auto;  
  width: auto; 
  background: #fff; 
  border:1px solid #efefef; 
  padding:0; 
}
.mainNav li  > ul li {  
  width:180px; 
  padding: 0; 
  position: relative; 
  height:35px; 
  border-bottom:1px solid #efefef; 
}   
.mainNav li  > ul li:last-child{  
  border-bottom:none; 
}
.mainNav li  > ul li a { 
  text-transform:none; 
  height:22px; 
  padding: 5px 10px 0px 15px; 
  text-align: left;  
  font-size: 13px; 
  line-height:25px; 
  color:#333; 
}
.mainNav li  > ul li a:hover { 
  border:none; 
}
.mainNav li ul li:hover > ul, .mainNav li ul li.hover > ul { 
  display: block; 
  position: absolute; 
  top:0; 
  left: 180px; 
  z-index: 0; 
  width: 180px; 
}

Answer 1

如果您关闭javascript并重新加载要复制的wordpress主题，您会注意到样式中断。

这是因为在列表项上设置的边距是均匀分布的，使用javascript计算然后应用。

你可以编写一个javascript解决方案来设置列表项的样式，或者快速解决方法是硬编码列表项的宽度，例如：

更改当前的CSS块：

.mainNav li a { 
  text-transform:uppercase; 
  padding:0 0 0 36px; 
  display:block; 
  padding-bottom:13px;  
}

以下内容：

.mainNav li a { 
  text-transform:uppercase; 
  text-align: center; /*added*/
  width: 117px; /*added*/
  padding:0; /*edited*/
  display:block; 
  /*padding-bottom:13px;*/ /*removed*/
}

Answer 2

看起来很固执。您在Firefox中的网站的屏幕截图，以及在firebug中看到的应用样式：