導航菜單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

回答

相關問題