0

我想让我的网站上的导航菜单均匀地跨越宽度。这是我正在尝试完成的示例，请注意链接如何均匀分布并拉伸导航栏的整个宽度。

我不确定要使用什么代码来完成此操作。我尝试了 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; 
}
4

2 回答 2

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*/
}
于 2012-06-01T18:12:54.870 回答
0

它在我看来是固定的。您在 firefox 中的网站截图，在 firebug 中应用了样式：

在此处输入图像描述

于 2012-06-02T11:40:03.953 回答