导航菜单Alighment CSS

我希望有我的导航菜单上我site跨度的宽度均匀。 Here是我正在尝试完成的一个示例，请注意链接是如何均匀间隔的并且拉伸导航栏的整个宽度。导航菜单Alighment CSS

我不能完全确定使用什么样的代码来实现这一目标。我试过保证金：汽车，但似乎没有工作。

这里是我有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; 
}

来源

2012-06-01 Lexi Smith

如果您关闭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-01 18:12:54

这并不工作:( –

以什么方式是不工作你有什么用 –

浏览器我想它在Firefox？和铬。出于某种原因，如果重写它上面的CSS并没有影响到菜单都没有。或许真的，我不知道。 –

它看起来固定在我身上。您的网站在Firefox中的截图，与萤火虫看到应用的样式：

enter image description here

来源

2012-06-02 11:40:03

是的，我增加了一些菜单得到它在中间，所以我还是不知道如何得到它做我想做的，而不基于然而，许多菜单我有。就像我将它缩小到4个菜单一样，我需要再次改变宽度像素。我想这是一个快速修复，直到我弄明白。 –

导航菜单Alighment CSS

回答

相关问题