使用填充拉伸ul-li菜單以適合全寬

我有一個漂浮的ul/li（the）的菜單，就是改變寬度，但我想填充包含div的完整寬度。使用填充拉伸ul-li菜單以適合全寬

代碼：

#main-content ul.jwts_tabbernav { 
    display: block; 
    margin-bottom: 20px; 
    text-transform: uppercase; 
    text-align: center; 
} 

#main-content ul.jwts_tabbernav li a, 
#main-content ul.jwts_tabbernav li a:link, 
#main-content ul.jwts_tabbernav li a:hover { 
    background: none repeat scroll 0 0 transparent; 
    border: 1px solid #734C2F; outline: 1px solid #734C2F; 
    color: #734C2F; 
    font-size: 12pt; 
    font-weight: bold; 
    margin: 0; 
    padding: 3px 35px; 
}

發展的頁面（有兩個不同的菜單寬度）：

http://www.kaplareva.com/polarinvest/?p=224

http://www.kaplareva.com/polarinvest/?p=227

任何想法，這到底是怎麼解決呢？

來源

2012-05-17 Gas

以下更改將使列表項擴展以填充容器。

ul { 
    display:table; 
    width:100%; 
} 

li { 
    display:table-cell; 
} 

a { 
    display:block 
}

一個需要注意的是，display:table-cell和display:table沒有在IE6/7原生支持，所以如果你需要支持這些瀏覽器，那麼你就需要另一種解決方案。隨着IE6 usage下降到只有7.1％和IE7 usage在2.54％，我知道越來越少的設計師支持他們。

來源

2012-05-17 08:54:35 andyb

太棒了！非常感謝，它的工作。我對IE的介紹並不太在意，好在它們越來越沒有用了。如果客戶抱怨，我會通過ifIE6或ifIE7樣式表爲它做一個補丁... – Gas

假設我理解正確的話，你只需將li元素display: block內使a元素：

#main-content ul.jwts_tabbernav li a, 
#main-content ul.jwts_tabbernav li a:link, 
#main-content ul.jwts_tabbernav li a:hover { 
    background: none repeat scroll 0 0 transparent; 
    border: 1px solid #734C2F; outline: 1px solid #734C2F; 
    color: #734C2F; 
    font-size: 12pt; 
    font-weight: bold; 
    margin: 0; 
    padding: 3px 35px; 
    display: block; 
}

來源

2012-05-17 08:40:07

設置一個顯示塊

#menu a { 
    display: block; 
}

來源

2012-05-17 08:50:06 ShibinRagh

使用填充拉伸ul-li菜單以適合全寬

回答

相關問題