用padding拉伸ul-li菜单以适应整个宽度

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

有任何想法如何解决这个问题吗？

- Gas

Answer 1

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

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％，我知道越来越少的设计师正在支持它们。

- andyb

---

太好了！非常感谢，它起作用了。我不太在意IE浏览器，很高兴它们越来越少使用。如果客户抱怨，我会通过ifIE6或ifIE7样式表为其制作补丁... - Gas

Answer 2

假设我理解你的意思，你只需要使 li 元素内的 a 元素的 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;
}

- Rory McCrossan

Answer 3

设置为显示块

#menu a {
    display: block;
}

- ShibinRagh