Question

我有一个浮动的ul / li（）的菜单，即改变宽度，但我想填充包含div的整个宽度。

代码：

#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

知道如何解决这个问题吗？

Answer 1

以下更改将使列表项展开以填充容器。

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

li {
    display:table-cell;
}

a {
    display:block
}

一个警告是，IE6 / 7中不支持display:table-cell和display:table，因此如果您需要支持这些浏览器，那么您将需要另一种解决方案。 IE6 usage降至7.1％，IE7 usage降至2.54％，我知道越来越少的设计师支持它们。

Answer 2

假设我已正确理解您，您只需在a元素li中制作display: block元素：

#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;
}

Answer 3

设置显示块

#menu a {
    display: block;
}

使用填充拉伸ul-li菜单以适应整个宽度

3 个答案: