使用填充拉伸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菜单以适合全宽

回答

相关问题