css - 导航菜单对齐 CSS

Question

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

我不确定要使用什么代码来完成此操作。我试过 margin:auto 但这似乎不起作用。

这是我的 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 block :

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