3

我有一个浮动 ul/li (the) 的菜单，它的宽度会发生变化，但我想填充包含 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

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

4

3 回答 3

2

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

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

li {
    display:table-cell;
}

a {
    display:block
}

需要注意的是display:table-cell和display:table在 IE6/7 中本机不支持，因此如果您需要支持这些浏览器，那么您将需要另一种解决方案。随着IE6 的使用率降至 7.1%，IE7的使用率降至2.54%，我知道支持它们的设计师越来越少。

于 2012-05-17T08:54:35.853 回答
0

假设我对您的理解正确，您只需要在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;
}
于 2012-05-17T08:40:07.543 回答
0

设置显示块

#menu a {
    display: block;
}
于 2012-05-17T08:50:06.103 回答